I've encountered an issue on my Vue.js website where the data is rendering correctly, but I keep receiving an undefined error in the console. The error seems to be related to an axios call I'm making in App.vue to fetch data from my CMS:
In App.vue:
async created() {
const strapiData = await getStrapiData();
// Update Vuex
this.$store.dispatch('setStrapi', strapiData);
}
Then in one of my components, I'm using a getter to access the data stored in Vuex:
In About.vue:
computed: {
aboutData() {
return this.$store.getters.strapiData.data.about
}
}
I then reference this data in my template code:
<img :src="aboutData.photo.name">
Although everything is rendering properly, I'm seeing this error in the console:
TypeError: Cannot read property 'photo' of undefined
at a.r (About.vue?3e5e:1)
I suspect that the issue might be related to the order in which my components are being created. I'm importing all child components into App.vue and rendering them there, but it seems like the child components are being created before the created lifecycle hook of App.vue:
In App.vue script:
components: {
'app-about' : About,
In App.vue template:
<template>
<div id="app">
<app-about></app-about>
</div>
</template>
If anyone has any insights on what might be causing this issue, I would greatly appreciate your help. Thank you!