vue3 中 如何获取 遍历拼接ref 的 dom？

Question

items可以通过此方法来获取，但是如何获取 span 标签呢？难道只能id

<template>
  <div v-for="(item, index) in arr" :ref="items">
    <span :ref="item + 'test' " >{{item}}</span>
  </div>
</template>

<script setup>
import {reactive} from 'vue';
const arr = reactive(['a','b','c'])
const items = el => {
  console.log(el);
}
</script>

Answer 1

v-for里，可以使用ref，使用ref操作span，v-for里的ref和普通ref不一样的地方是，在v-for里，ref取到的是个数组，需要使用[0]的方式访问

话说vue不建议直接操作dom

Answer 2

<div v-for="(item, index) in arr" :ref="items" :key="index">
    <span :ref="setRef" >{{item}}</span>
</div>


const arr = ref([1, 2, 3]);
const myRef = ref([]);

const setRef = (el) => {
   myRef.value.push(el);
};

 onMounted(() => {
     console.log(myRef.value)
 })

return {
   arr,
   setRef,
};

Answer 3

https://v3.vuejs.org/guide/mi...