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

最新推荐文章于 2024-05-14 17:32:47 发布

一只爱吃糖的小羊

最新推荐文章于 2024-05-14 17:32:47 发布

阅读量3.1k

点赞数

文章标签： vue3 动态ref

本文链接：https://blog.csdn.net/JaneLittle/article/details/129874580

版权

文章讲述了在Vue.js应用中遇到的在v-for循环中动态设置ref的问题。作者尝试直接通过`:ref`绑定动态变量的方式失败后，改为使用函数引用`setRef`并在ts代码中根据索引手动赋值给不同的变量。这种方法虽然不是最优解，但能成功获取元素。

摘要由CSDN通过智能技术生成

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

最近有个需求是对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 >

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