渲染动态选择选项

Question

我有一个表单,当前使用jQuery来执行一系列ajax请求,然后根据数据动态更改选择选项.我认为将vue.js重新实现作为一种学习体验会很好.但似乎遇到了一个障碍,即添加动态选项的最佳方式是什么<select>.文档中的这个链接(http://012.vuejs.org/guide/forms.html#Dynamic_Select_Options)看起来就像我需要的那样,但是在下面的代码中有问题复制.我有什么想法可能做错了吗？任何提示表示赞赏!

<script src="https://unpkg.com/vue"></script>

<script type="text/x-template" id="add-match-template">
    <select v-model="selected_game" options="games"></select>
</script>

<div id="add_match_form">
    <add-match-form></add-match-form>
</div>

<script type="text/javascript">
    Vue.component('add-match-form', {
        template: '#add-match-template',
        data: function() {
            return {
                games: [
                    {'value': 1, 'text': 'Game 1'},
                    {'value': 4, 'text': 'Game 4'}
                ],
                selected_game: null
            }
        }
    })

    new Vue({
        el: "#add_match_form"
    })
</script>

Answer 1

在Vue 2中,您不再以这种方式绑定选项.这是当前的文档.

Vue.component('add-match-form', {
  template: '#add-match-template',
  data: function() {
    return {
      games: [
        {'value': 1, 'text': 'Game 1'},
        {'value': 4, 'text': 'Game 4'}
      ],
      selected_game: null
    }
  }
})

new Vue({
  el: "#add_match_form"
})

模板:

<div id="add_match_form">
    <add-match-form></add-match-form>
</div>

<template id="add-match-template">
  <select v-model="selected_game">
    <option v-for="game in games" :value="game.value">{{game.text}}</option>
  </select>
</template>

工作实例

console.clear()


Vue.component('add-match-form', {
  template: '#add-match-template',
  data: function() {
    return {
      games: [
        {'value': 1, 'text': 'Game 1'},
        {'value': 4, 'text': 'Game 4'}
      ],
      selected_game: null
    }
  }
})

new Vue({
  el: "#add_match_form"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="add_match_form">
    <add-match-form></add-match-form>
</div>

<template id="add-match-template">
  <select v-model="selected_game">
    <option v-for="game in games" :value="game.value">{{game.text}}</option>
  </select>
</template>