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

Z时代
2024-03-06
分类：IT

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>

回答：

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

话说vue不建议直接操作dom

回答：

<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,};