时间戳

首页 > 解决方案 > 如何显示嵌套在模板属性内的数组中的对象的属性？

vue.js - 如何显示嵌套在模板属性内的数组中的对象的属性？

问题描述

我得到错误：

类型错误：“someArr[0] 未定义”。

当您尝试访问模板内的对象属性时：

<th v-bind:data-id="someArr[0].id">{{someArr[0].name}}</th>

尽管出现错误，但仍会显示数据。

someArr 的源数据：

Array[0]: Object {id: "1", name: "One"}
Array[1]: Object {id: "2", name: "Two"}

是否可以不使用循环直接获取值？

编辑

我在块 created() 内部调用了 fetchData() 方法，该方法通过 Ajax 检索数据并填充模型。现在我将检查您的假设，但为什么会显示数据？

标签： vue.jsvuejs2

解决方案

欢迎来到 StackOverflow 社区！

当你在 中使用任何值时vue data property，Vue 会跟踪它的值，这就是框架的全部目的。现在该值连接到响应性，并且您将该值绑定到 UI，因此每当该值发生更改时，Vue 都会跟踪它并重新渲染绑定到该值并反映更新值的模块。

在您的情况下，很明显有一个属性 Ex -

data() {
  return {
    someArr: []
  }
},
created() {
 // Await api call
 this.someArr = response
}

现在，对于第一次渲染，您的值是empty arr在异步请求完成并且该值得到更新后更新的值。但显然同步代码会执行，它会抛出someArr[0] is undefined值为空的错误。

对于这种情况，总是首选检查该值是否存在。

<th v-if="someArr.length" v-bind:data-id="someArr[0].id">{{someArr[0].name}}</th>

现在JS引擎将不会执行或查找someArr[0].id数组是否为空，一旦您获取更新的数据，Vue 将重新渲染，这一次它将查找 id，因为数组有一些值

推荐阅读