Vue.js 2 Cookbook

Using ref with v-for

If we have many components with the same ref, the handle that results will be of the array type.

We can rewrite our example for multiple children. Here's a slight modification for the child component:

Vue.component('child', {  template: "<p>Child {{num}}: {{mouth}}</p>",  props: ['num'],  data () {    return {      mouth: 'I didn’t eat that cookie',      stomach: `Yummy that cookie was ${this.num} times more delicious.`    }  }})

We want 10 children in our HTML, and we are interested in the stomach of the fourth child:

<div id="app">  <child v-for="i in 10" ref="junior" :num="i" :key="i"></child>  <p>Truth for child 4: {{child4Stomach}}</p></div>

The child4Stomach variable is initialized in the Vue instance, as follows:

new Vue({ el: ...