Attempting to utilize Vue's Async Actions for an API call is causing a delay in data retrieval. When the action is called, the method proceeds without waiting for the data to return, resulting in undefined values for this.lapNumber on the initial call.
The action is triggered with 'this.getRound(findRound);' in the following method:
getRaceInfo(date) {
let showModal = false;
let findRaceName = '';
let findCircuitName = '';
let findRound = '';
let findLapNum = '';
// iterate through each race to match date of current
this.allRaces.forEach(el => {
if (el.date != date) {
return;
} else {
// assign variables based on matching date
findRaceName = el.raceName;
findCircuitName = el.Circuit.circuitName;
findRound = el.round;
this.fetchRoundResults(findRound);
console.log('after fetch');
findLapNum = this.lapNumber;
showModal = true;
}
});
// set property values according to variables
this.raceName = findRaceName;
this.circuitName = findCircuitName;
this.roundNum = findRound;
this.lapNum = findLapNum;
return showModal ? (this.isModalVisible = true) : '';
},
The action being invoked is:
async fetchRoundResults({ commit }, roundNum) {
try {
const response = await axios.get(`http://ergast.com/api/f1/current/${roundNum}/results.json`);
const roundInfo = response.data.MRData.RaceTable.Races[0];
await commit('set_round_results', roundInfo);
console.log('set result');
return response;
} catch (e) {
console.log(e);
}
},
};
The sequence of events based on console logs:
after fetch
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property '0' of undefined"
found in
---> <RaceCalendar> at src/components/Calendar.vue
<App> at src/components/Dashboard.vue
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property '0' of undefined
at lapNumber (raceCalendar.js?8f5d:13)
at wrappedGetter (vuex.esm.js?2f62:762)
at Vue.eval (vuex.esm.js?2f62:95)
at Watcher.get (vue.runtime.esm.js?2b0e:4473)
at Watcher.evaluate (vue.runtime.esm.js?2b0e:4578)
at Vue.computedGetter [as lapNumber] (vue.runtime.esm.js?2b0e:4830)
at Object.get [as lapNumber] (vuex.esm.js?2f62:564)
at VueComponent.mappedGetter (vuex.esm.js?2f62:900)
at Watcher.get (vue.runtime.esm.js?2b0e:4473)
at Watcher.evaluate (vue.runtime.esm.js?2b0e:4578)
set result
On subsequent runs, while the undefined error is resolved, the data is still not 'set' until after the method execution.
after fetch
set result
Your assistance in resolving this issue would be greatly appreciated!
Thank you :)