Vue 访问嵌套数组对象

Question

由于我的数组包含多个数据，因此很难上传所有数据。所以我在下面上传了我的数组和对象的图像。

查看

<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}} 它不会打印出任何东西。

Answer 1

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>

Vue 访问嵌套数组对象

Vue access nested array objects

vue.js

vuedraggable