レンダリング動的選択オプション

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。