vue 循环动态设置ref并获取$refs
- 关于ref的使用和场景请看官网文档
- 下面是我对循环设置ref并获取使用的一些办法,简单记录一下
一. 使用理解步骤(个人理解、大白话概况)
- 单循或双循环标签使用,无论那种都要**
保证ref唯一
**
例如:可以在ref值后面附带id或不会重复的索引
- 针对上述唯一的ref进行获取
获取:单循环可以直接用$refs获取非单循环可以通过eval()获取
二. 单循环和无循环动态设置ref
- 设置 【ref=“xxx”】【ref="‘xxx’+index"】
就不多说了 简单
三. 双循环动态设置ref
- 设置【:ref="‘xxx’+id"】或【:ref="‘xxx’+index"】
<div v-for="(item,index) in topicList" :key="index"> <el-carousel-item v-for="(son,i) in item.questionList" :key="index+i"> <topic :ref="'topicRef'+son.bId"></topic> //或也可以用索引. 用一个索引会重复,如下 //<topic :ref="'topicRef'+(i+index)"></topic> </el-carousel-item> </div>
- 获取
eval("that.$refs.tagItem" +(x+index))[0] 或 eval("that.$refs.topicRef" +(ele.bId))[0]