Vue.js 分隔符在引号中不起作用

Question

我正在尝试创建一个 select 表单字段，其中 html 和值是用 vue.js v-for 属性填充的。 HTML 创建得很好，但每个选项的值仍然为 ${ item.id }，我假设是因为它在引号中。知道如何解决这个问题吗？

代码：

<ul id="example-1">
  <select>
<option v-for="item in items" value="${ item.id }">${ item.message }</option>

var example1 = new Vue({
  el: '#example-1',
  delimiters: ['${', '}'],
  data: {
    items: [
      { message: 'Foo', id: 1 },
      { message: 'Bar', id: 2 }
    ]
  }
})

JsFiddle here

Answer 1

绑定HTML属性，可以使用v-bind，如下：

<option v-for="item in items" v-bind:value="item.id">${ item.message }</option>

工作fiddlehere。

Vue.js 分隔符在引号中不起作用

Vue.js delimiters don't work in quotation marks

javascript

vue.js

vuejs2