Vue access nested array objects

Question

As my array consists of multiple data, it was difficult to upload all of them. So I have uploaded an image of my array and objects below.

View

<draggable :list="reservation.Reservation_people" class="list-group" draggable=".item" group="a">
   <div class="list-group-item item" v-for="element in reservation.Reservation_people" :key="element.name">
     <p>{{element.Person.first_name}}</p> /** Prints out Person.first_name **/

     /** is there a way to fetch Player_minors first_name="Sanu" as a separate entity 
under element.Person.first_name. So that it can drag Person.first_name and 
Player_minors.first_name separately; **/

    </div>
</draggable>

Is there a way to fetch Player_minors first_name="Sanu" as a separate entity under element.Person.first_name. So that it can drag Person.first_name and Player_minors.first_name separately?

Using element.Person.first_name prints out San. But if I use {{element.Person.Player.Player_minors.first_name}} it does not print out anything.

Daniel Elkington · Accepted Answer · 2020-05-28 02:11:56Z

2

Player.player_minors is an array, so you can't do Player.player_minors.first_name.

If you want to print the first player_minor name, you could do

{{ element.Person.Player.player_minors[0].first_name }}

If you want to print all of the player_minor names, you would have to use a nested v-for.

<div class="list-group-item item" v-for="element in reservation.Reservation_people" :key="element.name">
     <p>{{element.Person.first_name}}</p> /** Prints out Person.first_name **/

     <p
        v-for="player_minor in element.Person.Player.player_minors" 
        :key="player_minor.id">
          {{player_minor.first_name}}
     </p>

</div>

answered May 28, 2020 at 2:11

Daniel Elkington

3,9497 gold badges26 silver badges37 bronze badges

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

1 Comment

Yahoo Over a year ago

it prints out the minor when I used v-for="player_minor in element.Person.Player.Player_minors" but when I drag {{element.Person.first_name}} it drags {{player_minor.first_name}} as well. Is there a way to solve that ?

Collectives™ on Stack Overflow

Vue access nested array objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related