Vue dynamic binding ref v-for use (ref using the v-for components)

Foreword

In the recent development of dynamic content will need to set the ref, groping for a long time has finally figured out how to achieve.

1. The binding specifies one component

1.1, for example: This is an editor component, where it is set to ref myeditor

<fcEditor ref="myeditor"></fcEditor> 

1.2, in the code acquired by the component name myeditor

this.$refs.myeditor;

2. Use: ref dynamic setting component name

2.1, for example: using v-for cycle through an array of objects, steps to traverse the array is

  data () {
    return { steps:[ {name:'itemName',title:"step1",id:1,content:"步骤一",orderNumber:1}, {name:'itemName',title:"step2",id:2,content:"步骤二",orderNumber:2}, {name:'itemName',title:"step3",id:3,content:"步骤三",orderNumber:3}] } } 

2.2 Use: ref dynamically set ref, pay attention! Here are all the component names will be set to itemName, you might say why not item.id it, yes, first I would like to use item.id, but although this can be set, but is in the code should be taken to of.

      <itemBox style="" class="itembox" v-for="item in steps" :key="item.id" :ref="item.name"> </itemBox> 

2.3, obtaining a first component in the code

this.$refs.itemName[0]

Original: https://www.jianshu.com/p/8617f8852df7