How to set dynamic values for selection box in Nuxt ? #1988
Description
Hello folks,
I'm fetching the data from props for models and filtering models by make. So here by Changing make, i should to filter the models by selected make. how to achieve this in NUXT, Can anyone please help?.
Here is the code snippet.
Make DropDown
<select v-model="activeMake" @change="getModelsByMake(activeMake)">
<option v-for="(make, index) in makes" :key="index" v-bind:value="make.make">
{{ make.name }}
</option>
</select>
Model DropDown
<select v-model="activemodel">
<option v-for="(model, index) in sortModels" :key="index" v-bind:value="model.make">
{{ model.name }}
</option>
</select>
Component
export default {
props : ['dropDownModels', 'makes', 'make']
data: function() {
return {
activeMake: '',
activeModel: '',
sortModels: []
}
},
created() {
this.sortModels = this.dropDownModels.filter((m) => m.make === this.activeMake);
}
methods: {
getModelsByMake(make) {
this.sortModels = this.dropDownModels.filter((m) => m.make === make);
// Here the sortedModels are updated as per this function but updated models is not reflecting the changes in VUE, only showing the models which are filter at the time of created.
}
}
}