VueJS 2: Изменить варианты выбора другими элементами выбора

Question

У меня есть четыре элемента select в моем шаблоне. Предполагается, что параметры для каждого последующего элемента будут меняться в зависимости от предыдущего выбора. Так, например, если вы выберете «Тойоту» из «Автомобиля» select, в следующем должны появиться только модели 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 и change-events, вы можете просто отфильтровать списки на основе вашей модели.

Вы также можете использовать другой подход, работающий с индексами, учитывая, что у вас есть данные для каждой введенной вами записи. Я построил для этого демонстрацию.

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

Наслаждайтесь.