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.