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>

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

1 个答案: