Vue доступ к объектам вложенного массива - PullRequest
Новая
       80

Vue доступ к объектам вложенного массива

1 голос
/ 28 мая 2020

Поскольку мой массив состоит из нескольких данных, было сложно загрузить их все. Итак, я загрузил изображение своего массива и объектов ниже.

Array Nested Object

Просмотр 

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

Есть ли способ получить Player_minors first_name = "Sanu" как отдельный объект под element.Person.first_name. Чтобы он мог перетаскивать Person.first_name и Player_minors.first_name отдельно?

Использование element.Person.first_name выводит San . Но если я использую {{element.Person.Player.Player_minors.first_name}}, он ничего не распечатывает.

1 Ответ

2 голосов
/ 28 мая 2020

Player.player_minors - это массив, поэтому вы не можете сделать Player.player_minors.first_name.

Если вы хотите напечатать первое имя player_minor, вы можете сделать 

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

Если вы хотите напечатать все имен player_minor, вам нужно будет использовать вложенный 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>
...