In my third exercise, I have a json file that contains info about cars and their models. I am trying to populate 2 dropdowns from that file:1 for cars and the corresponding models in the other dropdown but not able to do that.
In the models dropdown that I did below, i see some null elements! (maybe corresponding of a place occupied in previos selection). I would like to have the models dropdown always have the first item by default. Thanks for help.
json file data:
[
{"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>
Try like following snippet:
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>