Vue 在使用 v-for 时无法读取 null 的属性答案

【问题标题】：Vue cannot read property of null while using v-forVue 在使用 v-for 时无法读取 null 的属性
【发布时间】：2020-08-14 03:39:33
【问题描述】：

有没有办法解决 id not defined on v-bind:key="persons.id" 的错误？

我的观点

<div v-for="reservation in reservationNameByTime" v-bind:key="reservation.id">
  {{reservation.id}} /** displays 1 **/
  <div v-for="player in reservation.Players" v-bind:key="player.id">
    {{player.id}} /**displays 1 **/
    <div v-for="persons in player.Person" v-bind:key="persons.id"> /** throws an error as id of null **/
      {{persons.name}}
    </div>
  </div>
</div>

JSON 数据

reservationNameByTime: [
 {
  id: 1,  /** defines reservation id **/
  Players: [
    id: 1,  /** defines players id **/
    Person:{
      id: 1,  /** defines the person id **/
      name: John
    }
   ]
 }
]

数组数据的图像

【问题讨论】：

标签： javascript arrays vue.js vue-component

【解决方案1】：

您的数据格式不正确，请使用您帖子中的 html 代码尝试此操作

reservationNameByTime: [{
    id: 1,
    Players: [{
        id: 1,
        Person: [{
            id: 1,
            name: 'John'
        },
        {
            id: 2,
            name: 'Marc'
        }]
    }]
}]

但是这个（下）更好，对于每个预订，你有一个 id 和一个玩家列表，玩家有 id 和 name

reservation: [{
    id: 1,
    players: [{
        id: 21,
        name: 'John'
    },
    {
        id: 55,
        name: 'Marc'
    }]
},
{
    id: 2,
    players: [{
        id: 34,
        name: 'Adrien'
    },
    {
        id: 12,
        name: 'Marion'
    }]
}]

HTML/VUE

<div v-for="reservation in reservations" v-bind:key="reservation.id">
    {{reservation.id}}
    <div v-for="player in reservation.players" v-bind:key="player.id">
        {{player}}
    </div>
</div>

【讨论】：

我刚刚更新了我的问题。现在我们可以查看有关如何为玩家格式化数组数据的图像描述。
如果你真的想使用这个数组试试这个<div v-for="el in player" v-bind:key="player.Person.id"> {{el.name}} </div>

【解决方案2】：

<div v-for="(reservation, i) in reservationNameByTime" v-bind:key="i">
    {{reservation.id}} /** displays 1 **/
    <div v-for="(player, j) in reservation.Players" v-bind:key="j">
        {{player.id}} /**displays 1 **/
        <div v-for="(persons, k) in player.Person" v-bind:key="k">
            {{persons.name}}
        </div>
    </div>
</div>

【讨论】：

【解决方案3】：

player.Person 是一个对象，v-for on an object 遍历对象的属性并返回其值。在这种情况下，它将是 1 和 John。所以你试图得到1.id 和John.id。

如果你只有一个人，你可以这样做：

div v-bind:key="player.Person.id">
   {{player.Person.name}}
</div>

【讨论】：

如果我有多个名字怎么办？
在什么结构中？
Players[0] 包含与上述相同的数据，例如 Person[{id:1, name:John}] 和 Players[1] 遵循相同的模式并由 Person[{id:2,姓名：戴夫}] .
但目前你有 Person{id:1, name:John}。你试过把它放在一个数组中吗？
Person 不能是数组，这不符合逻辑，使用玩家或 Person 但不能同时使用，参见下面的其他实现