Ошибка типа: невозможно прочитать свойство '0' из неопределенного внутри v-for

Question

console.log(this.sights) возвращает массив с 20 объектами, которые имеют несколько свойств, таких как name, photos, references и т. Д. В настоящее время я пытаюсь перебрать эти объекты и отобразить их name s и их photo_reference с. Я делаю это так:

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

Отображает sight.name. Однако я получаю сообщение об ошибке

"Ошибка при рендеринге:" Ошибка типа: невозможно прочитать свойство '0' из неопределенного "".

Я пытался получить доступ вручную так:

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

и возвращает photo_reference. Так что я не ошибаюсь в свойствах. Так что я делаю не так?

Это структура массива:

(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

Answer 1

Вы получаете эту ошибку, потому что некоторые объекты имеют sight.photos как undefined.Вы можете добавить такую ​​проверку перед доступом к нулевому индексу:

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