The return of console.log(this.sights) is an array containing 20 objects, each with properties such as name, photos, references, etc. My current goal is to iterate through these objects, displaying their names and photo_references. Here is how I am attempting to accomplish this:
<div @click='selectSight(index)' v-for='(sight, index) in sights'>
{{ sight.name }}
{{ sight.photos[0].photo_reference }}
</div>
The above code successfully displays the sight.name. However, I encounter an error message:
"Error in render: "TypeError: Cannot read property '0' of undefined"".
I attempted manual access as follows:
console.log(this.sights[0].photos[0].photo_reference)
This returns the photo_reference, indicating the properties are correct. So, where am I making a mistake?
Below is the structure of the array:
(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, __ob__: Observer]
0:
geometry: Object
icon: "https://maps.gstatic.com/mapfiles/place_api/icons/museum-71.png"
id: "975708e853f136200f2229c793df9070707b842e"
name: "National Museum of Modern Art, Tokyo"
opening_hours: Object
photos: Array(1)
0:
height: 3456
html_attributions: Array(1)
photo_reference: "CmRZAAAA60seVRHbzyg3TPIUPEUaDbzI2-TpMB3cB3bC8BYG_gRrJwmwSVY1Mcl1PBo0U0CMwmqssyQw4w2iHyh6ze3iQaiXdsveolGBovi3rGZTgvKjTV9PRt-WDieYrwoRy1z0EhBsZitey_MyjiwrYK_Sol3eGhSfOpXUpLc-3RYeJjz2JKMMXYNZYw"
width: 4608