Vue.jsで階層が深い連想配列の中身をv-forでselect/optionで表示する

Vue.jsで階層が深い連想配列の中身をv-forでselect/optionで表示する:

連想配列で持たせたデータをv-forで取り出したいときは、こんな感じにする。

hoge.fugasには、apiでデータを取得したものが入っている想定。

index.html

<select> 
    <option v-for="fuga in hoge.fugas" v-bind:value="fuga.key"> 
        {{fuga.value}} 
    </option> 
</select> 

vue.js

var vue = new Vue({ 
    data: { 
        hoge: [ 
            fugas: [] 
        ]     
    } 
}) 

Vue.js

フォーム入力バインディング

https://jp.vuejs.org/v2/guide/forms.html