解决在el-dialog中无法正确获取DOM的问题

在el-dialog中无法正确获取DOM

今天工作中有个需求是，在一个弹出框里放Echarts图表。

众所周知Vue里是在mounted生命周期里才能获取到DOM，于是我理所应当的：

mounted() {
	let diameter= document.getElementById("diameter");
	let diameterOption = {...};
	echarts.init(diameter).setOption(diameterOption);
}

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

知道了问题所在，就好解决了：

// 弹框的触发事件
showDialog() {
	this.isDialogShow = true;
	this.$nextTick(() => {
		let diameter= document.getElementById("diameter");
		let diameterOption = {...};
		echarts.init(diameter).setOption(diameterOption);
	})
}

注意一定要在控制dialog的布尔值变为true后调用nextTick，这样就能顺利获取到DOM啦~

关于在el-dialog中获取DOM节点

场景

需求要求在el-dialog中获取页面中的DOM节点

问题

直接document.getElementById获取的节点为undefined

解决

在获取DOM节点代码外层添加$nextTick()即可

代码如下：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。