vue3在v-for中设置动态ref无效及解决办法

着急怕啰嗦的小伙伴可以直接看最后的代码，不着急的小伙伴可以看看内容跟你需要的是不是一样。

最近有个需求是对10个图片上传，每个图片有不同的用途，由于对于上传之后的每个图片都要做各自不同的特殊处理放在不同的div里，所以需要给每个用来存放图片的div都设置一个ref，上传图片之后再处理。这就引发出了另外一个问题：在v-for循环中给元素设置动态的ref。为什么用v-for呢？因为10个图片，挨个写太麻烦了。

本来想着动态的ref应该很简单，就跟普通的动态属性一样这么写就行：

<div
    v-for="(item, index) in imgListData"
    :key="item.id"
  >
    <div
      :ref="`imgContainer${index+1}`"
    ></div>
</div>

然后在ts里这么取值就行：

const imgContainer1: any = ref();
·
·
·
const imgContainer10: any = ref();

结果在created中打印 imgContainer1.value是null，也就是在v-for里面这样设置动态的ref是无效的。

其实如果没在v-for里面，在设置ref的时候有变量是可以获取的：

<div
  :ref="`imgContainer${refName}`"
></div>  

const refName = 'a';
const imgContainera: any = ref();

以上代码在created中打印 imgContainera.value是有值的。

那么在v-for的循环中该怎么样设置动态的ref呢？我用的这个方法或许不是最好的，但这样确实能取到元素了，html代码：

<div
  v-for="(item, index) in imgListData"
  :key="item.id"
>
  <div
    :ref="(el: any) => setRef(el, index+1)"
  ></div>
</div>

ts代码：

<script lang="ts" setup>
// 设置动态 ref
  const setRef = (item: any, index: any) => {
    switch (index) {
      case 2:
        imgContainer2.value = item;
        break;
      case 3:
        imgContainer3.value = item;
        break;
      ···
      case 10:
        imgContainer10.value = item;
        break;
      default:
        imgContainer1.value = item;
    }
  };


const imgListData= reactive([   //  这个变量也可以用方法生成也可以直接定义
{
  id: 1,
   cname: '',
 },
 ...
 {
  id: 10,
   cname: '',
 },
]);

</script >

希望本文对您有所帮助，也希望有比较懂的大佬批评指正，不吝赐教！