Philip Philip - 25 days ago 8
Javascript Question

Vue.js delimiters don't work in quotation marks

I'm trying to create a select form field, where the html and the value are filled in with a vue.js v-for attribute. The HTML gets created just fine, but the value for each option remains as ${ item.id }, I'm assuming because it is in quotation marks. Any idea how to get around this?

code:

<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

To bind it with HTML attribute, you can use v-bind, like follwoing:

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

Working fiddle here.