VUE中循环绑定ref

<template>
  <div class="flex">
    <el-button v-for='(item,index) in list' :type=item.type
               @click=click(item) :ref="'ref'">{{item.value}}</el-button>
  </div>
</template>

循环绑定时，若是给一个字符串'xxx'，则会自动生成一个数组。

 

 

访问时就用

this.$refs.ref[n]

去访问就好。

 

当然，也可以在循环绑定这里额外加上特有值，譬如

:ref="'ref' + item.id"

那么访问时就是

this.$refs['ref' + n][0] //配合for in循环，这里的n是前面定义的特有值

去访问——因为只要加入了字符串，它就会自动生成一个数组。因此还是要加索引后缀来访问。

 

前者简单方便，但运用时需要记忆原数组顺序位置；后者麻烦，但实际语义清晰，可以根据渲染时绑定的属性来直接指定特定的组件而非通过其顺序。