Vue: Refs and V-For

by mattoconnell408

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<div id="app">
  <c1 ref="c1"></c1>
</div>

Babel + JSX

Vue.component('c2', {
  template: `
  <div>c2</div>
   `,
});


Vue.component('c1', {
  template: `
  <div>
  	<div ref="c1">
			<div v-for="i in ['a', 'b', 'c']">
      	<h1 ref="test">{{i}}</h1>
        <c2 ref="test-component"></c2>
       </div>
     </div>
   </div>
   `,
});


// This works!
// We can nest refs inside v-fors, even with nested components and 
// access from the same level
new Vue({
  el: '#app',
  mounted() {
    console.log(this.$refs.c1.$refs);
  }
});