在查询后显示数组的特定元素

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 }} 它不起作用，它对所有其他键都是一样的。控制台 return 这个错误：

Error when rendering component

Answer 1

组件在 AJAX 请求完成之前首次呈现。假设你在data函数中初始化了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>

在查询后显示数组的特定元素

Display a specific element of an array after a query

vue.js

vue-resource

vuejs2