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 here

Answer 1

要使用HTML屬性綁定它，你可以使用v-bind，像follwoing：

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

工作小提琴here。