我在使用 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 }}它不起作用,并且所有其他键都相同。 控制台返回此错误:
Error when rendering component
最佳答案
组件在 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>
关于vuejs2 - 在查询后显示数组的特定元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41666968/