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>