多层循环,动态设置ref ,并获取ref

原创已于 2024-02-18 10:19:27 修改 · 526 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2024-01-30 15:47:17 首次发布

本文介绍了在Vue应用中使用v-for进行多层循环时如何动态设置ref，并展示了如何通过`setRef`函数创建和存储ref对象，以及如何在需要时通过`getRef`函数获取特定层级的ref值。

多层循环,动态设置ref ,并获取ref

<div v-for='(item,index) in father' :key='index'>
<div v-for='(Eleitem,Eleindex) in item.children' :key='Eleindex' :ref='setRef(index,Eleindex)'>
{{Eleitem.name}}</div>
<div>

const father=[{children:[{name:1}]}]
 let resMap=Record<string, Ref<any>> = {};
 const setRef=(index1:number;index2:number)=>{
 let resName=`myRefs_${index1}_${index2}`
 let resObject=ref<any>(null)
 resMap[resName]=resObject
 return resObject
 }
 /* 获取ref */
 const getRef=()=>{
 let resName=`myRefs_${0}_${1}`// 换成你想要的数据
 let ref=resMap[resName]
 conole.log(ref.value)
 }