v-for循环下动态绑定ref后undefine的解决方式

最新推荐文章于 2023-10-27 14:35:24 发布

原创

最新推荐文章于 2023-10-27 14:35:24 发布 · 1.3k 阅读

收录于

当前文章被以下社区和专栏收录：

博客探讨了在Vue中使用v-for动态绑定ref时遇到的问题。当尝试访问绑定的DOM元素时，发现this.$refs返回的是数组而非直接的DOM元素，导致无法直接访问classList。解决方案是对v-for和静态ref做条件判断，根据不同的引用类型来访问正确的DOM元素。

一，实现效果

上面和下面是v-for渲染出来的，中间是写死ref渲染出来的：
在这里插入图片描述

二，原因分析

html的代码：

<!-- 头部区域的样式 -->
<!-- 头部区域的样式 -->
<div class="styleHeader">
  <div  v-for

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

笑道三千

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue - 动态绑定ref(使用变量)以及获取方式，解决v-for循环嵌套自定义子组件时无法this.$refs.xx找到动态组件的情况（详细示例教程）适合 vue.js nuxt.js uniapp

✅ 精选推荐文章

02-21

7409

vue把组件ref设为动态,然后用refs再找到，vue 动态赋值ref，vue同一个子组件循环出来如何使用，vue将子组件设置动态ref后，怎么 $ refs调用呢，vue怎么把组件ref设置成动态不唯一的，vue怎么把子组件改为独立的，多个地方调用互不影响，vue同一个子组件，被v-for循环后各自独立互不影响，vue - v-for 循环渲染多个 “重复” 子组件（仅 ref 不同，this. $ refs.xx 使用时依然能准确找到子组件）将子组件 ref 设为动态，这样每个子组件都是 “独立” 的

v-for中使用ref属性

believet93的博客

05-12

1万+

在v-for循环中使用ref会用一个问题，如果使用绑定 :ref 会发现，使用js是无法对绑定的元素进行操作的，原因在vue官网中有说明。但是还是希望能够在v-for中使用ref并且能够使用js对每个元素进行操作，这里就不要使用绑定的方式。下面给出了v-for中使用两种不同方式的实验结果，使用绑定的方式会报错，不使用绑定的方式可以操作成功。 1、v-for中使用ref，绑定的方式 <template> <div> <div class="main" @clic

3 条评论您还未登录，请先登录后发表或查看评论

vue导航栏激活样式active-class和exact-active-class的使用

jjw_zyfx的博客

03-27

897

vue导航栏激活样式active-class和exact-active-class的使用

vue3在v-for中设置动态ref无效及解决办法

一只爱吃糖的小羊

05-23

4239

实现在vue3的v-for中设置动态ref

vue组件的v-for循环中动态绑定ref

weixin_43422861的博客

03-02

6244

1、方法一：在vue组件的v-for循环中是无法动态绑定ref的，若强行绑定，当访问的时候会出现 undefined 的结果，但这不是说没有解决方法，在循环中写:ref=“xxx”，循环结束后，实际生成的是一个ref数组，当取循环中某一元素的ref时，使用下标即可，见下例：  <li v-for="(list, index) in tagList" :key="index" ref="tagItem">{{list.value}}</li&g

使用v-for渲染el-tree组件时出现ref失效的问题

weixin_44528067的博客

08-18

1176

这里通过子节点的选中连带选中父节点的操作，我打算使用el-tree的setChecked方法，通过parentId选择父节点，遇到的问题是v-for循环下tree的ref都指向了变量treeRefs，直接使用会报错。由于权限组内部存在连带关系，及二级菜单绑定着其第一个子孩子，所有需要当选择的节点存在这种父子联系时，主动的去勾选其父级。这里是因为treeRefs实际上包含未每一棵树都创造了一个对象作为tree的ref指向，所有实际上它的内部结构是一个数组的代理对象，如下图。

Vue使用v-for时动态绑定ref

The One Who's at the Front

07-14

2530

在vue中获得某个dom或者组件，我们会通过绑定 ref然后通过绑定后的名字来获取这个dom,如下：绑定指定某一个组件绑定 <div ref="box"></div> 获取 this.$refs.box 但是，如果我们在v-for中绑定ref的话，那么这个ref就会存在多个，比如我们点击事件让对应的显示/隐藏的话，我们很难找到这个对应的元素。那么，这时我们需要动态绑定不一样的ref，那么我们如何实现呢❓ 使用:ref动态设置组件名称绑定 <div

动态绑定id，根据ref动态获取元素解决不能动态绑定ref的问题；elementui框架中绑定动态的ref，动态绑定v-model

Sunny_lxm的博客

08-29

7983

（一）、动态绑定id //动态绑定id <button @click="insertAtCursor(item,index)" type="button" :id="'btn'+index">插入字</button> //<button @click="insertAtCursor(item,index)" type="button" :id="`btn${in...

this.$refs获取不到子元素身上的方法is not a function等问题

前端笔记——放弃很容易,但坚持一定很酷

07-15

8790

证明this.$refs[ref] 取到了值，只不过值身上没有execSqlData的方法，才会报 execSqlData is not a function.可以确定的是，子组件上是有execSqlData的方法，那么为什么还会报is not a function呢？当 ref 和 v-for 一起使用的时候，用this.$refs[xxx][0] 获取子组件身上的值。背景：使用v-for循环动态绑定ref，取值报错。分析：如果是动态的ref值取错了，那么会报。

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

热门推荐

weixin_34217773的博客

05-14

1万+

背景：初学vue做练习项目的时候，基于vue2.0版本使用refs属性获取v-for循环的dom时出现获取不到dom的情况，尝试采用原生的方法出现同样的情况。查了很多资料没有找到对应的详细说明，现将我发现的一些问题分享给大家。 html部分 <div class="food-group" v-for="(item,index) in goods" :key="index" ref="g...

递归函数中使用for循环的时候，return出的数据为undefined的解决方法

一个希望世界和平的前端程序猿的博客

03-01

2137

解决递归函数中return的数据为undefined的问题

v-for获取ref(vue2/3中获取动态ref)

LoveHaixin的博客

10-27

1235

【代码】v-for获取ref(vue2/3中获取动态ref)

vue3.0 v-for中ref获取不到子组件的实例

Z_kenshou的博客

03-13

2005

先说解决问题的方法这是查找了好多地方，最后在vue3.0文档上找到的，还是要多看文档啊！问题描述我有一个时间组件在页面上循环展示的，绑定ref，自己在本地跑的时候都是没有问题的一上生产问题就来了。改造前的代码这个时候在log里面打印的是undefined 如果获取到的话应该是个proxy对象改造后的代码取值是 deliveryBusinessTimesRef.value[index] 这个log之后就是proxy 这个时候发正式环境就没有问题了 ...

JavaScript 打印结果时多出一个undefined/出现undefined

Moelimoe的博客

10-04

3240

JavaScript 打印结果时多出一个undefined/出现undefined 1.检查是否变量未初始化. 如下图，未初始化值就拿来使用，结果会出现undefined. var newStr; 修正方法为:定义的同时给变量赋一个值，如不需要值，可以赋空值""： var newStr = ""; 2.使用for循环时结果多出一个undefined/出现undefined 检查是否for循...

关于在Vue中使用ref（此.$refs未定义 undefind）

PineappleL的博客

04-28

3874

但是页面还没有挂载上去，没有e l 属性， t h i s . el 属性，this.el属性，this.refs无法调用dom。我一开始设置ref在v-for列表上，直接获取this.$refs.name.style，永远是空的，调用的对象是本来就存在的，还是需要数据渲染之后才会出现的，同理，在mounted（）里面调用看看。后来才发现，this.$refs.name是一个数组，无法通过 .style 获取样式，因为$refs不是响应式的，只在组件渲染完成后才会生效，在初始渲染的时候是不存在的。

vue3中通过ref获取子组件实例，取值为undefined

weixin_43845028的博客

05-03

2105

如果完成第一步的话，在父组件调用子组件实例里某个属性的时候，TS 会报错，找不到该属性（但不影响运行）所以这里还需要定义一个类型，来声明子组件实例的类型声明子组件的 ref ，获取子组件实例（注意只能使用暴露出来的属性）

vue 在 created 中获取不到ref（this.$refs）

qq_17627195的博客

11-24

4759

原因： ref在dom树渲染完成以后才会生成，而created()是挂载的过程，dom树还没渲染完成，所以找不到ref返回undefind。解决方法：在created()中加入this.$nextTick(()=>{})，在此方法里面调用ref，this.$nextTick(()=>{})会在渲染完成后执行，可以用于解决渲染异步问题。 ...

vue中元素使用v-for循环使用ref取不到实例的解决方法

qq_39344725的博客

05-28

7373

当我们的元素使用v-for进行循环，那么我们每个实例的名字都会变的一样，这样我们在下面进行js操作的时候就不可以简单的使用下面的这种方法 this.$refs.实例名称所以当我们进行循环的时候，需要给每个实例的名字都赋上不一样的值 <input type="file" :ref="`upload${indexs}`" multiple="multiple" style="display: