关于VUE中v-for循环的dom使用ref获取不到问题

如果你在使用 Vue 中的 v-for 循环渲染 DOM 时，发现通过 ref 获取元素时无法成功获取到，可能是因为 ref 是在循环中被赋值给了数组，而不是单个元素。

解决这个问题的方法是，可以给每个循环的元素都添加一个唯一的标识符，例如使用 :key 属性，然后在 ref 中使用这个标识符，这样就能够正确地获取到每个元素了。参考代码如下：

<template>
  <div v-for="(item, index) in list" :key="index">
    <div ref="itemRef[index]">{{ item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['a', 'b', 'c'],
      itemRef: {}  // 定义一个对象，用来存储元素的引用
    }
  },
  mounted() {
    // 在 mounted 钩子函数中获取每个元素的引用
    for (let i = 0; i < this.list.length; i++) {
      this.$set(this.itemRef, i, this.$refs[`itemRef[${i}]`][0])
    }
    console.log(this.itemRef)  // 打印出引用对象
  }
}
</script>

在上面的代码中，我们定义了一个对象 itemRef，用来存储每个元素的引用。在 mounted 钩子函数中，我们使用 $refs 获取到每个元素的引用，然后通过 $set 方法将其添加到 itemRef 对象中。最后，我们可以在控制台中打印出 itemRef 对象，来查看每个元素的引用是否正确。