En mi tercer ejercicio, tengo un archivo json que contiene información sobre autos y sus modelos. Estoy tratando de completar 2 menús desplegables de ese archivo: 1 para automóviles y los modelos correspondientes en el otro menú desplegable, pero no puedo hacerlo.
En el menú desplegable de modelos que hice a continuación, ¡veo algunos elementos nulos! (quizás correspondiente a un lugar ocupado en la selección anterior). Me gustaría que el menú desplegable de modelos siempre tenga el primer elemento de forma predeterminada. Gracias por la ayuda.
datos del archivo json:
[ {"name": "Abarth", "models": [ {"name": "124 Spider", "series": null}, {"name": "500", "series": null}, ] }, {"name": "Acura", "models": [ {"name": "MDX", "series": null}, {"name": "NSX", "series": null}, {"name": "RL", "series": null}, {"name": "RSX", "series": null}, ] }, ] <template> <div> Make:<select @change="switchView($event, $event.target.selectedIndex)"> <option v-for="(item, index) in logitems" :key="index" v-bind:value="this.selected" > {{ item.name }} </option> </select> Model:<select> <option v-for="(item, index1) in logitems" :key="item" > {{ logitems[selectedIndex].models[index1]}} //not able to get the name ! </option> </select> </div> </template> <script> import logs from "../assets/car-makes.json"; export default { data() { return { logitems: logs, selectedIndex: "0", selected: { name: "Abarth", models: [ { name: "124 Spider", series: null, }, { name: "500", series: null, }, ], }, }; }, methods: { switchView: function (event, selectedIndex) { console.log(event, selectedIndex); this.selectedIndex = selectedIndex; }, }, }; </script>Prueba como el siguiente fragmento:
new Vue({ el: '#demo', data() { return { logitems: [ { name: "Abarth", models: [{name: "124 Spider", series: null}, {name: "500", series: null},] }, { name: "Acura", models: [{name: "MDX", series: null}, {name: "NSX", series: null}, {name: "RL", series: null }, {name: "RSX", series: null },] }, ], selected: { name: 'Abarth', model: '' } }; }, computed: { models(){ return this.logitems.filter(l => l.name === this.selected.name) } }, methods: { clearModel() { this.selected.model = this.logitems.find(l => l.name === this.selected.name).models[0].name } } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div> Make:<select v-model="selected.name" @change="clearModel"> <option v-for="(item, index) in logitems" :key="index" :value="item.name" > {{ item.name }} </option> </select> Model:<select v-model="selected.model"> <option v-for="(item, i) in models[0].models" :key="i"> {{ item.name }} </option> </select> <p>{{ selected }}</p> </div> </div>