Philip Philip - 2 months ago 13
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 ${ }, I'm assuming because it is in quotation marks. Any idea how to get around this?


<ul id="example-1">
<option v-for="item in items" value="${ }">${ item.message }</option>

var example1 = new Vue({
el: '#example-1',
delimiters: ['${', '}'],
data: {
items: [
{ message: 'Foo', id: 1 },
{ message: 'Bar', id: 2 }

JsFiddle here


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

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

Working fiddle here.