How to use two value on vue.js 2?

Question

I try to my component like this :

<script>
    export default {
        template: '\
            <select class="form-control" v-on:change="search">\
                <option v-for="option in options" v-bind:value="'+option.id+'|'+option.name+'">{{ option.name }}</option>\
            </select>',
        mounted() {
            ...
        },
        ...
    };
</script>

I separate them using separator |

So, I'll be using a split to get the id and the name

I try like that, but there exist error :

Uncaught ReferenceError: option is not defined

How can I solve it?

Answer 1

Here is what you want:

new Vue({
  el: '#demo',
  data: {
    selected: '',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value+'|'+option.text">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
</div>