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

Question

我得到了错误：

  

TypeError：“未定义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检索数据并填充模型。现在，我将检查您的假设，但是为什么随后显示数据？

Answer 1

欢迎来到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作为数组有价值