Vue cannot read property of null while using v-for

Question

Is there a way to solve an error which says id not defined on v-bind:key="persons.id" ?

My View

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

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

Image for array data

Willing Master · Accepted Answer · 2020-04-29 21:46:22Z

1

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

answered Apr 29, 2020 at 21:46

Willing Master

917 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrien Leloir · Accepted Answer · 2020-04-29 22:04:32Z

0

Your data is malformed, try this with the html code in your post

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

But this (below) is better, for each reservation, you have an id and a list of players, player have id and 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>

edited Apr 29, 2020 at 22:04

answered Apr 29, 2020 at 21:50

Adrien Leloir

5034 silver badges9 bronze badges

2 Comments

sandesh phuyal Over a year ago

I just updated my question. Now we can view image description of how array data is formatted for players.

Adrien Leloir Over a year ago

If you really want to use this array try this <div v-for="el in player" v-bind:key="player.Person.id"> {{el.name}} </div>

tony19 · Accepted Answer · 2022-07-16 05:14:45Z

0

player.Person is an object and v-for on an object iterates through the properties of the object and returns its values. In this case it would be 1 and John. So you're trying to get 1.id and John.id.

If you're only going to have one person, you could just do:

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

edited Jul 16, 2022 at 5:14

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Apr 29, 2020 at 21:46

D Malan

11.6k3 gold badges35 silver badges65 bronze badges

7 Comments

sandesh phuyal Over a year ago

what if I have multiple names?

D Malan Over a year ago

In what structure?

sandesh phuyal Over a year ago

Players[0] consists the same data above such as Person[{id:1, name:John}] and Players[1] follows the same pattern and consists of Person[{id:2, name: Dave}] .

D Malan Over a year ago

But currently you have Person{id:1, name:John}. Have you tried putting it in an array?

Adrien Leloir Over a year ago

Person can not be an array, this is not logic, use players or persons but not both, see below an other implementation

|

Collectives™ on Stack Overflow

Vue cannot read property of null while using v-for

3 Answers 3

Comments

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related