[Vuejs]-How to access data in nested data-structure?

by

2👍

✅

The fact that your simple code works is a great help

This tells you that it is not a fundamentally impossible process, and that you have correctly understood the necessary syntax in JS and Vue.

Next step in debugging: find out why it is undefined

The error message is telling you that this.product.images[0] is undefined. So I suggest inserting the following console.log statements, immediately before the line that gives the error.

console.log("this.product:", JSON.stringify(this.product,null,2) );
console.log("this.product.images:", JSON.stringify(this.product.images,null,2) );
console.log("this.product.images[0]:", JSON.stringify(this.product.images[0],null,2) );
this.product.images[0].paths.push([this.bigImgPath, this.thumbImgPath]

This may reveal the problem. If not, please report back what you see.

Watch out for the nested array you are creating

Although you have not yet written it to Firestore and therefore not yet faced an error message, I am worried about this fragment.

push([this.bigImgPath, this.thumbImgPath])

It is putting an array [big, thumb] as an element inside the parent array. This is a nested array and will probably give you an error in Firestore.

Did you mean something like this?

push({paths:[this.bigImgPath, this.thumbImgPath]})

Leave a comment