Home

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.
        }
     }
 }