vue模态框组件拿不到dom元素

最新推荐文章于 2024-11-12 23:17:46 发布

逢山鬼泣

最新推荐文章于 2024-11-12 23:17:46 发布

阅读量1.4k

点赞数 7

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_45696443/article/details/121332653

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

在Vue开发中遇到一个问题，当在模态框组件使用v-if隐藏元素时，发现在mounted阶段无法通过document.getElementById或ref获取到隐藏的DOM元素。即使使用this.$nextTick也无效，因为v-if的隐藏导致元素并未真正渲染。解决方案是将获取DOM元素的逻辑放在点击显示模态框的事件中，并配合this.$nextTick确保DOM已经更新。这样就能正确获取到模态框内的DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在写模态框的组件时，在一个页面引入了模态框组件。但是模态框设置初始是不显示的，然后我在模态框组件里面的mouted里面拿到dom元素，按理来说mouted都已经加载完元素了，但是我不管是通过document.getElementById还是ref拿值都是拿取不到，甚至还用了this.$nextTick ,都拿取不到dom元素。最后自己反应过来了，加载一个页面的时候会把模态框组件一起加载进来，但是我的模态框初始是不显示的，我是通过模态框自带的属性visible控制的，相当于是v-if隐藏了模态框，模态框组件虽然被引入了。但是模态框里面的dom被v-if隐藏了。所以无论如何我都拿取不到dom元素。这简直就是个大坑。后面我把拿取dom元素的事件改成了在我点击模态框按钮的时候传个值，然后在监听这个值的事件里去写拿取dom元素，就完全ok了。简单点讲就是我要在模态框显示的时候才能拿到模态框里面的dom元素，并且还要配合this.$nextTick使用，否则还是拿取不到dom元素，因为监听事件跑的比加载dom元素更快。