Vue.js - How to get last child ref in v-for children components

Question

I want to play latest audio after page is loaded:

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

how can I do something like this:

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

Answer 1

create new prop and pass true if the item is the last.

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

<player>

player component:

props {
   shouldPlay: Boolean
}

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

Answer 2

Since the ref is a reference to a regular HTML node, you can access the last child simply by using ParentNode.lastElementChild .
However, there is one conceptual error in your current code: the same ref is attached to each player instance. You probably meant to attach it to a parent node instead.

 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>