Computed property from store not triggering changes or watcher

Viewed 59

I have a mutation getDropDownData in my store and this mutation looks like the following:

async getDropDownData(state) {
  let res = await ApiService.executeQueryGet('category/get')
  state.dropdownData.category = res.data

  res = await ApiService.executeQueryGet('dealership/get').then(
  )
  state.dropdownData.dealership = res.data

  res = await ApiService.executeQueryGet('fuel/get')
  state.dropdownData.fuel = res.data

  res = await ApiService.executeQueryGet('transmition/get').then(
  )
  state.dropdownData.transmition = res.data

  res = await ApiService.executeQueryGet('new_or_used/get')
  state.dropdownData.newUsed = res.data

  res = await ApiService.executeQueryGet('car_model/get')
  state.dropdownData.car_model = res.data
},

My states in this module look like this:

state: {
  dropdownData: {},
},

The getDropDownData mutation is called from the mounted hook of a parent component called AddCar as follows:

mounted() {
    store.commit('addCar/getDropDownData')
  }

And I am trying to get the dropdownData state from a child component of AddCar as follows:

  computed: {
    ...mapState('addCar', ['dropdownData']),
    searchdropdownData: function() {
      return JSON.stringify(this.dropdownData);
    },
  }
  watch: {
    'searchdropdownData': function() {

      alert('dropdown Changed');
    }
  },

The first problem I am facing is that my watcher is not triggered. I also tried watching dropdownData itself and still get the same problem. The second problem is that I am trying to use the properties of dropdownData as follows:

        <v-select
          :items="dropdownData.category"
          v-model="selectedCategory"
          label="Category"
          item-text="name"
          outlined
          rounded
        ></v-select>

And this is bringing unexpected results depending on how quickly the API calls finish. I sometimes see the right options in the select and see no options at times. I understand this is a problem in the sequence of the mutation and rendering but couldn't find a way to fix it. Any help would be appreciated. Thanks.

0 Answers
Related