Vuejs 2：第2選択リストを最初に変更する

Question

最初の選択リストで選択した値に従って2番目の選択リストを変更したい。それは私が各選択のための2つのVueのインスタンスをしたときに機能しましたが、私は小さなアプリをやってみたかったので、そのすべてが少しきれいです。

types JSON配列はVue JSの外にある必要があります。あなたはフィドルでそれを見ることができます。

何とか2番目の選択リストを更新する方法がわかりません。

私はこのような何かをしたし、それは完全に働いた前に：

// methods of first select (category) 
methods: { 
    update: function (value) 
    this.options = types[value] 
    } 
} 

... 

// methods of second select (typselect) 
methods: { 
    onChange(event) { 
    typselect.update(event.srcElement.value) 
    } 
} 

アプリ：

<div id="app"> 

    <select v-model="category" v-on:change="onChange"> 
    <option>Choose</option> 
    <option value="5">type1</option> 
    <option value="6">type2</option> 
    <option value="11">type3</option> 
    </select> 

    <select id="typselect"> 
    <option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option> 
    </select> 

</div> 

は、だから私はこのような何かのためにそれを切り替える：

new Vue({ 
    el: '#app', 

    data: { 
    category: '5' 
    }, 

    computed: { 
    options: function(event) { 
     console.log('should be called on change'); 

     let options = '' 
     options = 1; 
     // options = types[event.srcElement.value]; // this would be so easy... 
     return options 
    } 
    }, 

    methods: { 
    onChange: function(e) { 
     console.log(event.srcElement.value); 
     this.options = this.options 
    } 
    } 
}) 

しかし、私2番目の選択リストを更新する方法を知りません。 https://jsfiddle.net/Honkoman/g9g5uukr/2/

Answer 1

あなたの計算された次のようになります。ここでは

はフィドルが来ます。

computed: { 
    options: function(event) { 
    return types[this.category] 
    } 
}, 

fiddleが更新されました。