v-for 在 Vue 上返回空

Posted 2023-02-22

【中文标题】v-for 在 Vue 上返回空

【英文标题】：v-for returns empty on Vue

【发布时间】：2020-08-28 23:42:31

【问题描述】：

这是我在 Vue.Js 上的第一个项目。我无法使用v-for 显示我的嵌套对象。当v-for 用于element.fist_name 时，它会打印出空列表。

下面是我在 jsfiddle 上的代码。

https://jsfiddle.net/ujjumaki/yeh9cdap/11/

【问题讨论】：

jsfiddle.net/27sx8aLp

【参考方案1】：

在最后的 v-for you have element:

"Person": 
                "id": 1,
                "first_name": "David",
                "last_name": "Sew",
                "email": "[e-mail]",
 

它对每个属性进行迭代，如果您更改为：

 <div class="list-group-item item" v-for="element in yahoo.Person" v-bind:key="element.id">
     element
 </div>

如果你想显示你不需要做最后一个 v-for，只需：

<div id="app">
 <div v-for="reservation in teamByTime2" v-bind:key="reservation.id">
   <div v-for="yahoo in reservation.Reservation_people" v-bind:key="yahoo.id" >    
     yahoo.Person.first_name
    </div>
  </div>
</div>