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>