2016-11-15 2 views
1

hueとvalueにvue.js v-for属性が入力されている選択フォームフィールドを作成しようとしています。 HTMLはうまく作成されますが、各オプションの値は$ {item.id}のままです。引用符で囲まれているので、私は推測しています。どのようにこれを回避するための任意のアイデアですか?Vue.jsデリミタは引用符では機能しません

コード:

<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

は、HTML属性とそれをバインドするには、follwoingのように、v-bindを使用することができます。

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

作業フィルドhere

関連する問題