vue.js でselect の生成、その２。動的に生成する。

で、引き続き、一つ目のセレクトを選ぶとそれに応じて二つ目のセレクトが生成される、というのに挑戦。

html側。

<div id="app">
    <select v-model="category" v-on:change="resetSelect">
        <option value="">--選択してください--</option>
        <option v-for="option in catOptions" v-bind:value="option.value">
        {{ option.text }}
        </option>
    </select>
    <span>first Selected: {{ category }}</span>

    <select v-model="product" >
        <option value="">--選択してください--</option>
        <option v-for="option in productOptions[category]" v-bind:value="option.value">
        {{ option.text }}
        </option>
    </select>
    <span>second Selected: {{ product }}</span>
</div>

js側。

var app = new Vue({
    el: '#app',
    data: {
        category: '',
        product: '',
        catOptions: [
            { text: 'One', value: 'A' },
            { text: 'Two', value: 'B' }
        ],
        productOptions: {
            A: [
                {text: "pen", value: "PEN"},
                {text: "pencil", value: "PENCIL"}
            ],
            B:[
                {text: "apple", value: "APPLE"},
                {text: "pinapple", value: "PINAPPLE"}
            ]
        }
    },
    methods: {
        resetSelect: function(){
            this.product = '';
        }
    }
});

v-on:change="resetSelect"　の部分とか、<option value="">--選択してください--</option>　の空の選択部分とかはなくてもそれなりに動くし、その方がスマートな気もするんだが、やってみてもらうと分かるんだがなんとなく動きがヘンである。 一旦選んでしまうと一旦選択を空にしてやり直すことができない、ってのもなんか気になる。