Vue.js - 如何獲得最後一個孩子裁判在V-兒童成分

Question

我要玩最新的音頻頁面加載後：

<player ref="player" v-for="item in data"><player>

我該怎麼辦這樣的：

vm.$refs.player.last().play();

Answer 1

創造新的道具，如果該項目是最後一個傳遞true。

<player ref="player" v-for="(item, index) in data" :should-play="index === data.length - 1"> 

<player> 

播放器組件：

props { 
    shouldPlay: Boolean 
} 

mounted() { 
    if (this.shouldPlay) 
    this.play(); 
}, 

Answer 2

由於ref是對常規HTML節點的引用，因此只需使用ParentNode.lastElementChild即可訪問最後一個子節點。
但是，您當前的代碼中存在一個概念性錯誤：每個玩家實例都附帶相同的參考。您可能打算將它附加到父節點上。

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    items: [{ 
 
     src: "foo" 
 
    }, { 
 
     src: "bar" 
 
    }] 
 
    }, 
 
    mounted() { 
 
    const target = this.$refs.parent.lastElementChild 
 
    console.log(target) 
 
    } 
 
})

<script src="https://unpkg.com/vue"></script> 
 
<div id="app"> 
 
    <div ref="parent"> 
 
    <player v-for="(item, index) in items" v-bind:key="index" v-bind:src="item.src"></player> 
 
    </div> 
 
</div>