VueJS 2：通过其他选择元素修改选择选项

Question

我的模板中有四个select 元素。每个后续元素的选项都应该根据前面的选择而改变。例如，如果您从“汽车”select 中选择“丰田”，则下一个应该只显示丰田车型。我尝试设置它，但 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

享受吧。