javascript - TypeError: Cannot read property '0' of undefined inside v-for - Stack Overflow

admin管理员组

文章数量:1392099

console.log(this.sights) returns an array with 20 objects that have a couple of properties like name, photos, references, etc. Currently I am trying to loop through these objects and display their names and their photo_references. I do this like this:

<div @click='selectSight(index)' v-for='(sight, index) in sights'>
    {{ sight.name }}
    {{ sight.photos[0].photo_reference }}
</div>

This displays the sight.name. However, I get an error

"Error in render: "TypeError: Cannot read property '0' of undefined"".

I tried manually accessing like this:

console.log(this.sights[0].photos[0].photo_reference)

and it returns the photo_reference. So, I'm not mistaking the properties. So what am I doing wrong?

This is the array structure:

(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, __ob__: Observer]
    0:
        geometry: Object
        icon: ".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

console.log(this.sights) returns an array with 20 objects that have a couple of properties like name, photos, references, etc. Currently I am trying to loop through these objects and display their names and their photo_references. I do this like this:

<div @click='selectSight(index)' v-for='(sight, index) in sights'>
    {{ sight.name }}
    {{ sight.photos[0].photo_reference }}
</div>

This displays the sight.name. However, I get an error

"Error in render: "TypeError: Cannot read property '0' of undefined"".

I tried manually accessing like this:

console.log(this.sights[0].photos[0].photo_reference)

and it returns the photo_reference. So, I'm not mistaking the properties. So what am I doing wrong?

This is the array structure:

(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, __ob__: Observer]
    0:
        geometry: Object
        icon: "https://maps.gstatic./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

• javascript
• arrays
• vue.js
• vuejs2

Share Improve this question Follow edited Jan 25, 2019 at 4:10 adiga 35.3k99 gold badges6565 silver badges8787 bronze badges asked Jan 24, 2019 at 20:00 OnyxOnyx 5,7821010 gold badges5252 silver badges119119 bronze badges 6

• Where does the array e from? – Pointy Commented Jan 24, 2019 at 20:03
• 2 It's probably because you only tested sights[0] - the property must be missing from another member of the array. – Jeff Commented Jan 24, 2019 at 20:04
• There must be some sight which has photos set to undefined. Check the entire sights array – adiga Commented Jan 24, 2019 at 20:04
• Don't forget; opening the object like that in the console only gets you the value at the time you clicked the down arrow. Most of the time, this is a timing thing. I don't know vue, but you should be able to echo JSON.stringify(sights) before that line in the HTML. – Heretic Monkey Commented Jan 24, 2019 at 20:04
• The array es from Google Maps API. I'm gonna check if there's an object that has empty photos. – Onyx Commented Jan 24, 2019 at 20:07

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 4

You're getting that error because some of the objects have sight.photos as undefined. You could add a check like this before accessing the zeroth index:

<div @click='selectSight(index)' v-for='(sight, index) in sights'>
    {{ sight.name }}
    {{ sight.photos && sight.photos.length > 0 ? sight.photos[0].photo_reference : '' }}
</div>

本文标签： javascriptTypeError Cannot read property 39039 of undefined inside vforStack Overflow