v-for 在 Vue 上返回空

【问题标题】：v-for returns empty on Vuev-for 在 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

标签： arrays vue.js v-for

【解决方案1】：

在最后的 v-for you have element:

"Person": {
                "id": 1,
                "first_name": "David",
                "last_name": "Sew",
                "email": "david@gmail.com",
 }

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

 <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>

【讨论】：