🤬 Spent the entire day debugging an error, but no luck today
Why does this happen (Vue.js)?
I get a good response when i console log a variable in my mounted() function:
console.log(this.accDetailsAll[1].profileImg)
But when I access the same in my template in the html, it gives an error "Cannot read property 'profileImg' of undefined"
{{ accDetailsAll[1].profileImg }}
----
It checks if the value exists before rendering it. So when the method on mounted() finished, data becomes available, and it will get printed. On load, before data is available it will be hidden. Because of async function, that array is empty when it’s loaded. Async doesn’t wait.. it lets your code run. It works on the console because you use await which wait for the call to finish. But on template, you tried to access it directly.
Another way if you don’t want to add v-if is to construct your array object in data when you initialize it:
accDetailsAll: [ profileImg: '' ]
So the structure is always there. But if you work with API, you don’t want to prepare all the attributes on your component. This construct approach will be hard to maintain, because one more thing to update if the API changes. Using v-if is better.
I thought because I added await in the function, when i access it in the template, it will wait till the data is loaded..
It will wait in the function.. not on the template. If you use asyncData, then this is ok because it’s processed before page is loaded.
I get a good response when i console log a variable in my mounted() function:
console.log(this.accDetailsAll[1].profileImg)
But when I access the same in my template in the html, it gives an error "Cannot read property 'profileImg' of undefined"
{{ accDetailsAll[1].profileImg }}
----
It checks if the value exists before rendering it. So when the method on mounted() finished, data becomes available, and it will get printed. On load, before data is available it will be hidden. Because of async function, that array is empty when it’s loaded. Async doesn’t wait.. it lets your code run. It works on the console because you use await which wait for the call to finish. But on template, you tried to access it directly.
Another way if you don’t want to add v-if is to construct your array object in data when you initialize it:
accDetailsAll: [ profileImg: '' ]
So the structure is always there. But if you work with API, you don’t want to prepare all the attributes on your component. This construct approach will be hard to maintain, because one more thing to update if the API changes. Using v-if is better.
I thought because I added await in the function, when i access it in the template, it will wait till the data is loaded..
It will wait in the function.. not on the template. If you use asyncData, then this is ok because it’s processed before page is loaded.