Vue中this.$ref获取不到DOM对象问题解决

最新推荐文章于 2024-08-09 14:16:18 发布
最新推荐文章于 2024-08-09 14:16:18 发布
阅读量1.6k 收藏 4
点赞数 3
分类专栏： vue 文章标签： vue.js javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhu_zhu_xia/article/details/124945972
版权

1、使用this.$refs如果要在mouend()中使用，必须要在this.$nextTick(()=>{  } )   这里面实现，要不是找不到ref，原因是mouned（）之后，BOM节点还没有完全挂载上，于是找不到定义的ref。

2、可以直接在updata()的生命周期函数中使用，不用写this.$nextTick(()=>{  } ) 

3、在methods:{  } 方法中使用，也需要使用this.$nextTick(()=>{  } ) 等到页面完全渲染完毕之后在调用即可

zhu_zhu_xia
关注
专栏目录
vue3中如何获取dom节点，不能用this.$refs
我的博客
03-23 2994
下面提供了两个方法可以获取节点。
使用this.$nextTick()获取不到数据更新后的this.$refs.xxx.
Rised的博客
12-25 2752
只能用setitmeout是因为数据在在下个Event Loop中也出不来，这是因为v-if中的条件在下次事件循环中也不一定能够满足。今天遇到了这样一个场景，在数据更新之后，使用this.$nextTick(()=>{console.log(this.$refs.xxx)}) 获取不到改dom，但是用setTimeout能够获取到，在此记录一下。也就是说在下个事件循环中没有满足v-if中的条件，所以没有获取到数据。在vue 中的devtools中 可以获取到。在vue中的devtools中也有，
Vue 解决通过this.$refs来获取DOM或者组件报错问题
11-20
1.关于this.$refs的使用场景 如果ref属性加在普通元素上，那么this.$refs.name则指向该DOM元素 <p ref=”p”>hello</p> <!– this.$refs.p 指向该DOM元素 –> 如果ref属性加在组件上，那么this.$refs.name指向该组件实例 <child ref=”child”></child> <!– this.$refs.child 指向该组件 –> 2.为什么有时候通过this.$refs.name来获取会报错？ 一个比较常见的场景：在一个弹窗打开的时候立刻通过this.$refs来
vue中在mounted使用$refs获取不到DOM元素
m0_50207524的博客
05-28 1361
在使用ref的时候，在mounted中通过$ref获取节点是获取不到报undefinedthis.$refs.xx 为 undefined。
在Vue中this.$refs获取为undefined的原因和解决办法（this.$refs.属性为undefined原因）
最新发布
My_story_begins的博客
08-09 1847
this.$refs获取为undefined的原因和解决办法和this.$refs.属性为undefined原因
解决vue里碰到 $refs 的问题的方法
12-11
本篇文章介绍了vue里碰到 $refs 的问题，分享给大家，希望能帮助大家解决问题 记录困惑自己一个简单的问题…(瞬间感觉官方文档的强大) 在自己做的一个项目中，遇到一个列表页，根据id能进入详情页（动态匹配路由），详情页是单独的一个组件，在这个详情的组件里，我想获取内容给你区域的高度，以此来判断对底部按钮显示的位置，但是在ref的时候，就是获取不到该标签，在mounted钩子函数里打印 this.$refs，也能看到这个值，但就就是点不出来（this.$refs这个对象里这个值，但是就是获取不到，我打印的是个假值?） 在mounted函数，打印的每次都是undefined。郁闷啊…为什么啊
Vue通过ref获取不到$refs
weixin_42677904的博客
04-18 3813
今天写项目时发现一个问题，就是明明已经定义了ref，但通过$refs打印却没有打印出想要的结果。代码如下 <!-- html部分 --> <div ref="myOrder" v-if="isOrder"></div> // js部分 init () { console.log(this.$refs.myOrder) //undefined } 打印结果是undefined。 后来查阅资料后发现问题所在：ref所在的标签不要用v-if，使用v-show就好了。并且r
vue中使用$refs获取不到DOM元素
yangy_u的博客
12-09 9436
this.$refs.xx 为 undefined 的几种情况： 1. 在created 钩子函数中调用： create()在实例创建完成后被立即调用。这时，实例已完成数据观测、属性和方法的元素，watch/event事件回调。但是，挂载阶段还没有开始，所以this.$refs获取不到DOM。 2. 获取的是设置了v-if/v-show的元素： 如果在DOM结构中的某个DOM节点使用了v-if、v-show或v-for（根据后台数据动态操作DOM），那么这些DOM 在mounted阶段是不存在的。 在mou
vue初始化获取不到ref问题
weixin_53889154的博客
05-12 3055
描述：因为我在我的代码结构是这样的 <div ref = "dom"> <div v-for="(item,index)in list" :key="index> <div :ref="'dom' + index"></div> </div> </div> 在跟元素和根元素底下的元素都加上ref但是mouted内只能获取到根元素，并且我还加了this.$nexttick 仍然获取不到，然后我打印了一下数据，发现.
vue 问题笔记 ref获取不到指定的DOM节点问题解决
zem
07-13 3万+
在vue中不建议操作DOM，但是如果我们在没办法的情况下，可以通过ref来进行DOM操作，而在使用DOM时，可能会有获取不到ref对应DOM节点的问题 像下面这种情况，这是执行了console.log(this.$refs)的情况 在用console打印出来的时候明明看到可以按下箭头显示我们要的组件内容，但是在花括号里面却写的是undefined，此时如果要获取这个节点的属性值，会报无法从...
vue列表单项展开收缩功能之this.$refs的详解
10-17
在Vue.js中，`this.$refs` 是一个用于获取组件实例引用的重要特性，它允许开发者直接访问DOM元素或自定义组件实例。在这个场景中，`this.$refs` 被用来实现列表单项的展开和收缩功能。下面我们将深入探讨如何使用`...
vue3学习与实践：遇到给组件设置ref属性获取不到实例的问题
qq_23404533的博客
09-11 4562
v-if、v-else-if、v-else：false修饰的组件不会载入页面中，会被删掉；v-show：组件都会载入页面中，实际是控制其display属性显隐；
【vue3报错】解决vue3 ref 获取不到子组件
weixin_52418790的博客
09-13 4417
在父组件内调用子组件内的事件从而改变子组件的某些状态，父子组件使用``语法糖，父组件通过给子组件定义ref访问其内部事件。这看起来完全没毛病，理想很丰满，现实很骨感，写完就是访问不到，还报错，离离原上谱，这究竟是为啥
this.$refs获取不到dom的可能原因及方法解决
热门推荐
北京欢迎您
12-27 4万+
背景 搞饿了么高仿APP时，使用this.$refs.wrapper.getElementsByClassName('food-list') 时获取不到dom节点 正常能获取到应该是如下图： 然后我又用了网上的方法: this.$refs.foodList （foodList是li的dom节点） 结果还是刷新页面时获取不到dom 然后我对比了网友访的饿了么的源码，下面是网友的 下面是我的： ...
vue中this.$refs获取不到组件元素(子组件)的解决办法
weixin_45832746的博客
03-07 1万+
3、组件在v-if的作用下，导致这个子组件未渲染，也是导致获取不到的因素，后续等渲染出来再用refs也是获取不到的。2、在mounted之前的钩子函数中获取不到，可以用this.$nextTick(()=>{｝1、必须要等页面中的ref子组件加载完毕，才可以获取到。
vue中使用this.$refs获取不到子组件的方法，属性方法都为undefined的解决方法
范德萨的博客
08-09 7084
因为注册了多个ref，获取是不能单单知识refs.xxx，需要使用数组和索引来获取具体一个组件refs[index].xxx。使用this.$nextTick()，来等组件渲染完毕之后再使用refs调用子组件方法。好这么一写，导致前两个组件都无法正常使用……
vue项目获取不到异步数据dom的解决方案
北极那企鹅丶
01-28 2112
我们都知道在created钩子函数获取异步数据，mounted钩子函数里面获取dom节点，但是如果出现这种情况，你获取的异步数据比mounted钩子函数还要滞后，导致异步数据的dom渲染不出来，那么这种情况怎么解决呢？ 第一种方案 为了确保异步数据确实获取到了，我们可以在异步数据获取成功里面的回调写我们的逻辑。 // 以下为伪代码 methods: { async getList() { await getList() // 这里成功获取异步数据 this.$nextTick(() =>.
【Vue】Vue的$ref属性为空对象或者为undefined问题及解决办法（涵盖uniapp/H5/微信小程序）
徐海东的博客
07-13 2万+
目录问题：获取this.$refs为空对象或者为undefined原因一：在uniapp中，非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）解决方法：ref在非H5端使用在自定义的组件原因二：使用了版本过低的调试基础库原因三：ref组件使用了条件渲染，即v-if、v-show，这些DOM节点在mounted无法被访问到,详细可以看 深入响应式原理-Vue.js原因四：使用了v-for循环动态绑定ref（大部分时请求后端数据动态渲染DOM），this.$ref[name]获取
Vue使用this.$refs.xxx.$el获取不到DOM元素的一种解决方案
halozhy的博客
11-20 4149
起因 之前看有的文章说Vue中获取元素高度宽度是给元素标签加上 ref="xxx"，之后用 this.$refs.xxx。但是又有人说用 this.$refs.xxx.$el，感觉有点迷 方案 给对应的标签加上 ref="xxx"之后 对于原生的 HTML 元素，拿 DOM 用 this.$refs.xxx 对于封装过的 Vue 组件，拿 DOM 用 this.$refs.xxx.$el 另外 如果是能拿到 DOM，但是拿不到里面的具体属性（比如offsetHeight），可以看一下这篇文章 https
vue中为什么this.$refs获取的ref没有vue实例
07-08
在Vue中，使用`this.$refs`来获取ref是可以获取到对应DOM元素的引用的，而不是直接获取Vue实例。ref是用来给特定的DOM元素或子组件赋予一个唯一的标识，以便在Vue组件中可以通过`this.$refs`来访问到这些DOM元素或子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值