<img v-bind:src="object.array[0]"> array nested within object but ERROR "Cannot read properties of undefined (reading '0')"

[dharnil]

Hi Vue JS Community,

I have a question, it could be a bug or missing feature or "my bad" from what I have been reading.

I have the following img tag thats I am trying to v-bind with array nested in object

object { item_1, item_2, array: [ 1, 2, 3, 4] }

when I try to use it this way my code breaks.

But When I use it this way, It works. which is that I am using JS to populate another variable

new_array [1, 2, 3, 4] <-- object { item_1, item_2, array: [ 1, 2, 3, 4] }

basically v-bind cannot resolve nested objects or array 🥲

[LinusBorg]

You'll need to share the relavant code.

The error is just telling you that product.images is undefined. That is usuall happening because you render before the data has been fetched etc.

Its not related to v-bind

[dharnil]

Interesting, though could you please tell me why would images[] work in this case and not product.images[] as I think they are both the same.

I reckon, images[] might even have larger delay compared to product.images[] because images[] = product.images[]

Can you advice me a way to fix it?

[LinusBorg]

No, I can't tell you that because I have no idea what you are actually doing in your code. Which is why I already asked you to share it.