渲染動態選擇選項

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> 

Example。