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

标签 vuejs2 vue.js vue-resource

我在使用 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/

相关文章:

javascript - vue-resource 返回 PromiseObj

javascript - Vue-router:去掉 url 中的尾部斜杠

javascript - 在 Vue 应用程序中使用 Cheerio

javascript - 如何定期更新 VueJS 中的组件

javascript - 我应该在 Vuex 操作上使用 vue-resource

json - 为什么 'axios' 和 $http (vue-resource) 对 json 查询字符串的行为不同?

webpack - Vue.js - 将 CSS (SCSS) 从单个 *.vue 文件中分离出来

vue.js - Vue 3 包更新错误

javascript - “v-model”指令无法更新迭代变量本身

javascript - 视觉 : why this simple v-for doesn't work: Elements in iteration expect to have 'v-bind:key' directives vue/require-v-for-key error