Vue.js delimiters don't work in quotation marks

Question

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 1

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.