有没有办法解决显示 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 } ] }]数组数据的图像
3 回答
哔哔one
TA贡献1854条经验 获得超8个赞
player.Person是一个对象，并且v-for在对象上迭代对象的属性并返回其值。在这种情况下，它将是1and John。所以你试图得到1.idand John.id。
如果你只有一个人，你可以这样做：
div v-bind:key="player.Person.id">
{{player.Person.name}}
</div>
HUWWW
TA贡献1874条经验 获得超12个赞
您的数据格式不正确，请使用您帖子中的 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>
潇湘沐
TA贡献1816条经验 获得超6个赞
<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>
添加回答
举报
0/150
提交
取消