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中，您不再以这种方式绑定选项。这是current documentation。

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>

工作示例

＆＃13;

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"
})

＆＃13;

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

＆＃13;

Answer 2

  <select v-on:change="setCenter" v-model="market">
                        <option v-for="(item,index) in markets"
                                v-bind:key="index" :value="index">{{item.name}} 
                        </option>
  </select>

不要忘记v-bind：key，也要使用：value映射值，否则将不会选择默认值。我在这里使用索引作为值，但是您可以使用item属性。索引更好，因为索引更改时很容易在数组中找到对象。

渲染动态选择选项

2 个答案: