亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Vue 在使用 v-for 時無法讀取 null 的屬性

Vue 在使用 v-for 時無法讀取 null 的屬性

元芳怎么了 2022-07-21 22:31:08
有沒有辦法解決顯示 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>


查看完整回答
反對 回復 2022-07-21
?
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>


查看完整回答
反對 回復 2022-07-21
?
瀟湘沐

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>


查看完整回答
反對 回復 2022-07-21
  • 3 回答
  • 0 關注
  • 452 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號