Problem with v-for, array undefined
I have spent hours on this issue and I can not get it solved whatever I try. I am fetching Graphql data with Nuxt-Apollo and the data is getting fetched fine, able to console.log it and even print it out raw in the template with the handle bars. However, when trying to iterate through the data in v-for I am getting "Cannot read properties of undefined (reading '0')".
I have tried all kinds of await/then combinations, I have tried with putting v-if on the element and tying it to length directly or over a computed property and nothing seems to work. The data is obviously available in the template as the v-if passes as true, but in v-for it is undefined. This seems like a really simple issue and I assume the solution is as well, but I just can't see what I am doing wrong.
I have tried all kinds of await/then combinations, I have tried with putting v-if on the element and tying it to length directly or over a computed property and nothing seems to work. The data is obviously available in the template as the v-if passes as true, but in v-for it is undefined. This seems like a really simple issue and I assume the solution is as well, but I just can't see what I am doing wrong.
3 Replies
I don’t see a
handle key in an array item. Are you sure it exists?You've just helped me solve the issue, thank you. The handle wasn't the problem, but one of the latter fields that should have also been iterable, but wasn't because I didn't modify the custom query correctly and I was using another query before to fill the template. The ['0'] in the error got me thinking in the wrong direction and I thought the problem was with the first element in the array