Vue.js分隔符不能用引号括起来

时间:2016-11-15 07:26:58

标签: javascript vue.js vuejs2

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

1 个答案:

答案 0 :(得分:1)

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

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

工作小提琴here