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

我得到一个错误：

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

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

{{someArr[0].name}

尽管存在错误，但仍会显示数据

someArr的源数据：

Array[0]：对象{id:“1”，名称：“One”}
数组[1]：对象{id:“2”，名称：“Two”}

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

编辑

---

我在block created（）中调用这个方法fetchData（），它通过Ajax检索数据并填充模型。现在我将检查您的假设，但为什么会显示数据？

欢迎来到StackOverflow社区

当您在

vue数据属性

中使用任何值时，vue会跟踪它的值，而这正是框架的全部用途。现在，该值连接到反应性，您将该值绑定到UI，因此每当该值发生更改时，Vue都会跟踪该值并重新呈现绑定到该值并反映更新值的模块

在你的情况下，很明显，有一个房地产交易所-

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

现在，对于第一个渲染，您的值是

空arr

，一旦异步请求完成并更新该值，该值就会更新。但是很明显，同步代码将执行，这会抛出一个错误，

someArr[0]未定义，因为值为空

对于这种情况，始终首选检查值是否存在

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

{{someArr[0].name}

现在，
JS
引擎将不会执行或查找
someArr[0]。id
如果数组为空，则在获取更新后的数据后，Vue将重新渲染，这次它将查找id，因为数组具有一些值
数据是最初填充的还是随后加载的？第一次渲染组件时，
someArr
似乎不可用。请尝试类似于
{{someArr[0].name}}
I在创建的块（）内调用此方法fetchData（），它通过Ajax检索数据并填充模型。现在我将检查您的假设，但为什么会显示数据？真是妙极了！你是@boussadjra brahim天才！谢谢你，你的解决方案成功了。你说得对@shirtle，显然数据没有时间加载。