Вывести конкретный элемент массива после запроса

Question

я в беде, чтобы отобразить определенный элемент в массиве с vuejs 2. После этого запроса я получаю массив с 20 элементами:

this.$http.jsonp('https://api.instagram.com/v1/users/self/media/recent/?access_token=mytoken').then((response) => { 
    this.photos = response.body.data 
}, (err) => { 
    console.log(err) 
}) 

Если Я пытаюсь отобразить содержимое {{photos}}, {{photos [0]}}, но он работает, но если я попытаюсь отобразить содержимое такого ключа {{photos [0] .id}}, он не работает и это то же самое для всех остальных ключей. консоли вернуть эту ошибку:

Ошибки при рендеринге компоненты

Answer 1

Компонент визуализирует впервые до того, как запрос AJAX завершен. Предполагая, что вы инициализируете photos = [] в функции данных, при первом представлении компонента будет пустой массив. На данный момент photos[0]: undefined и photos[0].id вызывает TypeError.

Чтобы обойти это, используйте v-if только для визуализации, когда объекты, к которым вы пытаетесь получить доступ, существуют.

<!-- only render if photos contains at least 1 item --> 
<div v-if="photos.length"> 
    {{photos[0].id}} 
</div>