el-dialog子组件在mounted周期内获取不到dom?

文章探讨了在Vue中el-dialog子组件在mounted生命周期内无法通过常规方式获取DOM的问题,原因是el-dialog的显示隐藏由CSS控制,可能延迟生成DOM。解决方案包括使用$nextTick或在updated周期内尝试获取DOM,特别是在处理依赖后台数据动态生成的DOM时。

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

el-dialog子组件在mounted周期内获取不到dom?

正常父子组件在mounted生命周期内可以获得dom
父created—子created—子mounted—父mounted----子updated—父updated

一、问题描述

** el-dialog控制显示隐藏是css控制的display:none **

在一个弹出框里放Echarts图表。众所周知Vue里是在mounted生命周期里才能获取到DOM,于是我理所应当的:
在mounted阶段用document.querySelector()以及this.$refs获取元素均获取不到。用两种方式获取元素,打印出来的结果都是undefined。
有解答说用this.nextTick(function(){…}),试了一下在我这个场景中,结果还是undefined

二、分析原因

在mounted阶段,若需要获取的元素或组件有v-if,v-for属性。
v-if的初始化结果为false。v-for遍历的数组初始化阶段无值。(即mounted阶段后,根据获得的后台数据来动态操作dom)这两种情况都会导致mounted阶段获取元素的语句获取不到dom。
链接: https://blog.csdn.net/weixin_44582045/article/details/124662065

三、猜测

报错,找不到DOM,无法生成echarts。但mounted里不应该发生这种情况的,所以只有一种可能性:那就是el-dialog和v-if一样,采用默认不生成DOM的方式,只有在弹框出现时才会生成。知道了问题所在,就好解决了:

链接: https://blog.csdn.net/Naaaano/article/details/122349588

// 弹框的触发事件
openDialog() {
	this.$nextTick(() => {
		获取dom
	})
}
或者在子updated生命周期内也可以获得dom
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值