当前位置: 首页 > news >正文

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

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
http://www.lryc.cn/news/33932.html

相关文章:

  • 第九章 opengl之光照(光照贴图)
  • JDK动态代理(powernode CD2207 video)(内含教学视频+源代码)
  • 【Linux】Sudo的隐晦bug引发的一次业务问题排查
  • Java VisualVM 安装 Visual GC 插件图文教程
  • 【C语言】详解静态变量static
  • SpringBoot整合ElasticSearch实现模糊查询,排序,分页,高亮
  • YARN基本架构
  • 【C++复习】类和对象全知识点总结
  • 基于轻量级YOLOv5开发构建汉字检测识别分析系统
  • leetcode-每日一题-66(简单题,数组)
  • LeetCode295之数据流的中位数(相关话题:优先队列)
  • 助你加速开发效率!告别IDEA卡顿困扰的性能优化技巧
  • Java设计模式-适配器模式
  • Linux 练习六 (IPC 管道)
  • 合并两个有序链表(精美图示详解哦)
  • 33 JSON操作
  • 三八妇女节快乐----IT女神活动随笔
  • 【PSO-PID】使用粒子群算法整定PID参数控制起动机入口压力值
  • 当代数据分析指南:激发商业洞见的七个方法(上)
  • javaWeb核心02-JSP、EL、JSTL、MVC
  • spring-boot+mybatis-plus连接Oracle数据库,及查询相关数据
  • 电商使用CRM系统有什么好处,如何选择
  • Nacos2.2.0多数据源适配oracle12C-修改Nacos源码
  • 第十四届蓝桥杯三月真题刷题训练——第 5 天
  • 大数据框架之Hive:第3章 DDL(Data Definition Language)数据定义
  • 概率论小课堂:统计学是大数据方法的基础
  • 监控集群概念讲解
  • 如何通过DAS连接GaussDB
  • 支持在局域网使用的项目管理系统有哪些?5款软件对比
  • Linux CentOS7 MySQL 5.7安装