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

Question

我正在尝试创建一个选择表单字段，其中 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在这里

Answer 1

要将其与 HTML 属性绑定，您可以使用v-bind，如下所示：

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

在这里工作小提琴。