VueJS 2：他の選択要素による選択オプションの変更

Question

テンプレートにはselectの要素が4つあります。後続の各要素のオプションは、前の選択に基づいて変更されるはずです。たとえば、「車」selectから「Toyota」を選択すると、次はToyotaモデルのみが表示されます。私はこれを設定しようとしましたが、AJAX要求は永遠に呼び出しを繰り返します。この種のフォームにはどのようなパターンが最適ですか？ここで

は、私は、テンプレートに持っているものの例です：

<select v-model="selected.car" :change="getModels()"> 
    <option v-for="car in cars" value="car.id">{{ car.name }}</option> 
</select> 

<select v-model="selected.model" :change="getYear()"> 
    <option v-for="model in models" :value="model.id">{{ model.name }}</option> 
</select> 

... 

とJavaScript：

methods: { 

    getModels() { 
     axios.get('/api/models/'+this.selected.car).then(resp => { 
      this.models = resp.data; 
    } 

    ...  
} 

だから何がここで最高のパターンでしょうか？

Answer 1

データの量に応じて、すべてのモデルを直接ロードし、前の選択に基づいて並べ替えることができます。このように、Ajaxや変更イベントを処理する必要はなく、モデルに基づいてリストをフィルタリングするだけで済みます。

インデックスを使って作業する別のアプローチを使用することもできます。ただし、提供するすべてのエントリのデータがあることが前提です。私はこれについてデモを作りました。

Step 1: Create multiple <select>-elements 
Step 2: Have lists of manufacturers, models, equipment for every possible index 
Step 3: Based on the selected previous index, which you map to a model, iterate over the respective list, also enable the <select>-element 

デモ：http://codepen.io/NikxDa/pen/EZqJpP

をお楽しみください。