如何在 vue.js 2 上使用两个值？

Question

我这样尝试我的组件：

<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>

我用分隔符将它们分开|

所以，我将使用拆分来获取 ID 和名称

我这样试过，但存在错误:

Uncaught ReferenceError: option is not defined

我该如何解决？

Answer 1

这是你想要的：

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>

如何在 vue.js 2 上使用两个值？

How to use two value on vue.js 2?

javascript

vue.js

vue-resource

vue-component

vuejs2