In my Vue.js project, I am trying to trigger a Vuex action in the created() lifecycle hook and then proceed to call an asynchronous method to fetch more data from the server upon receiving the initial data. The goal is to utilize this data in a component. However, I encountered an issue with the Observer returned from the Promise. I attempted to switch the data to a computed property without success. I also tried using await, but it didn't resolve the problem either. Interestingly, another computed property named item functions correctly. I understand that the Observer plays a crucial role in Vue's reactivity system, but I'm unsure how to troubleshoot this.
<SeriesBarChart v-if="!inProgress" :series="series" /> // initial implementation
<SeriesBarChart v-if="!inProgress" :series="groups" /> // attempt using a computed property
data: () => ({
series: [{}, {}],
inProgress: true,
}),
created() {
this.$store.dispatch('GET_POLL', { slug: this.slug }).then(() => {
this.runQueries(this.item._id, ['vehicles=car&vehicles=bike', 'region=PRG']); // despite attempting await here, unsuccessful
});
},
computed: {
item() {
return this.$store.getters.POLL;
},
groups() {
return this.series;
},
},
methods: {
async runQueries(id, queries) {
this.inProgress = true;
const promises = [];
for (let i = 0; i < queries.length; i += 1) {
promises.push(this.$store.dispatch('GET_POLL_VOTES', { id, query: queries[i] }));
}
Promise.all(promises).then((values) => {
for (let i = 0; i < values.length; i += 1) {
this.series[i] = values[i].data.data;
}
});
this.inProgress = false;
}