当前位置: 首页 > 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

相关文章:

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

el-dialog子组件在mounted周期内获取不到dom?一、问题描述二、分析原因三、猜测正常父子组件在mounted生命周期内可以获得dom 父created—子created—子mounted—父mounted----子updated—父updated 一、问题描述 ** el-dialog控制显示隐藏是css控制的display&…...

第九章 opengl之光照(光照贴图)

OpenGL光照贴图漫反射贴图镜面光贴图光照贴图 一个物体的不同部分是不同的材质,那么会有不同的环境光和漫反射颜色表现。 漫反射贴图 原理就是:纹理。 是对同样的原理使用了不同的名字:其实都是使用一张覆盖物体的图像,让我们能…...

JDK动态代理(powernode CD2207 video)(内含教学视频+源代码)

JDK动态代理(powernode CD2207 video)(内含教学视频源代码) 教学视频原代码下载链接地址:https://download.csdn.net/download/weixin_46411355/87545977 目录JDK动态代理(powernode CD2207 video&#xf…...

【Linux】Sudo的隐晦bug引发的一次业务问题排查

Sudo的隐晦bug引发的一次业务问题排查写在前面问题描述问题排查高负载现象排查日志排查跟踪任务调度过程Sudo引发的问题手动复现问题分析处理方案写在前面 记录一次生产环境sudo启动进程频繁被Kill且不报错的异常处理过程,如果遇到同样的问题只想要解决方案&#x…...

Java VisualVM 安装 Visual GC 插件图文教程

文章目录1. 通过运行打开 Java VisualVM 监控工具2. 菜单栏初始视图说明3. 工具插件菜单说明4. 手工安装插件5. 重启监控工具查看 Visual GC1. 通过运行打开 Java VisualVM 监控工具 首先确保已安装 Java 环境,如此处安装版本 JDK 1.8.0_161 C:\Users\niaonao>j…...

【C语言】详解静态变量static

关键字static 在C语言中:static是用来修饰变量和函数的static主要作用为:1. 修饰局部变量-静态局部变量 2. 修饰全局变量-静态全局变量3. 修饰函数-静态函数在讲解静态变量之前,我们应该了解静态变量和其他变量的区别: 修饰局部变量 //代码1 #include &l…...

SpringBoot整合ElasticSearch实现模糊查询,排序,分页,高亮

目录 前言 1.框架集成-SpringData-整体介绍 1.1Spring Data Elasticsearch 介绍 2.框架集成Spring Data Elasticsearch 2.1版本说明 2.2.idea创建一个springboot项目 2.3.导入依懒 2.3.增加配置文件 2.4Spring Boot 主程序。 2.5.数据实体类 2.6.配置类 2.7.DAO 数据…...

YARN基本架构

主要由ResourceManager、NodeManager、ApplicationMaster和Container等组件构成,如图所YA示。 ResourceManager(RM) RM是全局资源管理器,负责整个系统的资源管理和分配 主要由两个组件构成:Scheduler调度器和应用程序…...

【C++复习】类和对象全知识点总结

类和对象写在前面类和对象面向对象类类的定义类的访问限定符类的作用域类的实例化类对象大小this指针类的默认成员函数构造函数析构函数拷贝构造函数运算符重载赋值运算符重载前置后置重载取地址及const取地址操作符重载const 成员static 成员友元友元函数有元类内部类匿名对象…...

基于轻量级YOLOv5开发构建汉字检测识别分析系统

汉字检测、字母检测、手写数字检测、藏文检测、甲骨文检测在我之前的文章中都有做过了,今天主要是因为实际项目的需要,之前的汉字检测模型较为古老了还使用的yolov3时期的模型,检测精度和推理速度都有不小的滞后了,这里要基于yolo…...

leetcode-每日一题-66(简单题,数组)

这道题其实还没那么简单,中间还是有的绕的。。。。给定一个由 整数 组成的 非空 数组所表示的非负整数,在该数的基础上加一。最高位数字存放在数组的首位, 数组中每个元素只存储单个数字。你可以假设除了整数 0 之外,这个整数不会…...

LeetCode295之数据流的中位数(相关话题:优先队列)

题目描述 中位数是有序整数列表中的中间值。如果列表的大小是偶数,则没有中间值,中位数是两个中间值的平均值。 例如 arr [2,3,4] 的中位数是 3 。例如 arr [2,3] 的中位数是 (2 3) / 2 2.5 。 实现 MedianFinder 类: MedianFinder() 初始化 Media…...

助你加速开发效率!告别IDEA卡顿困扰的性能优化技巧

在现代软件开发中,IDE(集成开发环境)是一个必不可少的工具。IntelliJ IDEA是一个广受欢迎的IDE,但有时候IDE的性能可能会受到影响,导致开发人员的工作效率降低。本文将介绍一些可以提高IDE性能的技巧,帮助开…...

Java设计模式-适配器模式

1、简介 适配器模式是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式,它结合了两个独立接口的功能。 这种模式涉及到一个单一的类,该类负责加入独立的或不兼容的接口功能。 2、适配器模式分类 目标接口(Target&#x…...

Linux 练习六 (IPC 管道)

文章目录1 标准管道流2 无名管道(PIPE)3 命名管道(FIFO)3.1 创建删除管道文件3.2 打开和关闭FIFO文件3.3 管道案例:基于管道的客服端服务器程序使用环境:Ubuntu18.04 使用工具:VMWare workstati…...

合并两个有序链表(精美图示详解哦)

全文目录引言合并两个有序链表题目描述方法一:将第二个链表合并到第一个思路实现方法二:尾插到哨兵位的头节点思路实现总结引言 在前面两篇文章中,我们介绍了几道链表的习题:反转链表、链表的中间结点、链表的倒数第k个结点&…...

33 JSON操作

目录 一、介绍 二、JSON的特点 三、JSON语法 1、json中的数据类型 四、JSON文件的定义 五、读取JSON文件 1、读取json文件的两种方式 (1)read、write (2)json.load 2、使用json.load读取json文件的步骤 3、练习读取json文件 六、练…...

三八妇女节快乐----IT女神活动随笔

献丑了,一首小小散文诗,请大家轻喷 O(≧口≦)O 我的答案 天下芸芸众生,好似夜幕漫天繁星。 与你相识,只是偶然。 简单的一个招呼,于是开始了一段故事。 我们或是诉说,或是分享; 我们彼此倾听&…...

【PSO-PID】使用粒子群算法整定PID参数控制起动机入口压力值

最近在学优化算法,接触到了经典寻优算法之粒子群PSO,然后就想使用PSO算法来调节PID参数,在试验成功之后将此控制算法应用到了空气起动系统上,同时与之前的控制器进行对比看看哪种控制效果最好。 0 引言 PID参数整定主要有两种&…...

当代数据分析指南:激发商业洞见的七个方法(上)

如果说眼下的发生的事能证明什么,那就是基于实时可信的数据分析正在变得越来越重要。但是要是想要在需要的时候准确地获取中肯的洞察,我们所需要的可不只是漂亮的可视化。 如何让你的员工都有能力和机会都做出最好的决策,不管这个决策会有多…...

Lingbot-Depth-Pretrain-VitL-14处理复杂光照与反射场景效果展示

Lingbot-Depth-Pretrain-VitL-14处理复杂光照与反射场景效果展示 深度估计技术,简单来说就是让计算机像人眼一样,判断出画面中每个物体离我们有多远。这项技术在自动驾驶、机器人导航、增强现实等领域都扮演着关键角色。然而,当场景中出现一…...

解决Docker容器中英伟达GPU驱动报错:nvidia-container-toolkit安装指南

1. 为什么Docker容器无法识别英伟达GPU? 最近在帮朋友调试一个深度学习项目时,遇到了一个典型问题:当尝试在Docker容器中运行需要GPU加速的应用时,系统报错提示无法找到NVIDIA驱动。错误信息是这样的: Error response …...

【英飞凌】TC3XX单片机型号解码:从命名规则看芯片选型

1. 英飞凌TC3XX单片机命名规则解析 第一次接触英飞凌TC3XX系列单片机时,我完全被那一长串型号搞懵了。TC387TP、TC377T、TC397QP...这些看似随机的字母数字组合,其实隐藏着丰富的芯片信息。经过几个项目的实战,我终于摸清了这套命名规则的规律…...

FlatBuffers游戏开发终极指南:如何实现零解析实时数据传输

FlatBuffers游戏开发终极指南:如何实现零解析实时数据传输 【免费下载链接】flatbuffers FlatBuffers: Memory Efficient Serialization Library 项目地址: https://gitcode.com/gh_mirrors/flat/flatbuffers 在游戏开发中,数据传输的效率直接影响…...

知识向量化实战指南:从模型选型到混合检索优化

1. 知识向量化的核心价值与应用场景 第一次接触知识向量化这个概念时,我也是一头雾水。直到在医疗知识库项目中亲眼看到"糖尿病治疗"和"血糖控制方案"这两个看似不同的查询,通过向量化后获得了0.92的相似度评分,才真正理…...

3大核心能力重新定义macOS炉石传说对战体验:HSTracker全方位辅助系统解析

3大核心能力重新定义macOS炉石传说对战体验:HSTracker全方位辅助系统解析 【免费下载链接】HSTracker A deck tracker and deck manager for Hearthstone on macOS 项目地址: https://gitcode.com/gh_mirrors/hs/HSTracker HSTracker是一款专为macOS平台设计…...

别再为IP冲突头疼!YOLOv5+海康威视摄像头组网与实时检测的完整避坑指南

工业视觉组网实战:YOLOv5与海康威视摄像头的智能协同方案 在智能制造与安防监控领域,将AI算法与专业摄像设备结合已成为技术标配。但当工程师真正着手部署时,往往会陷入网络配置的泥潭——IP冲突导致设备失联、RTSP流媒体断断续续、多网卡环…...

轻量级语义通信系统在边缘计算中的实践与优化

1. 边缘计算为什么需要轻量级语义通信? 想象一下你家的智能门铃摄像头,它需要实时把门口的画面传到你的手机上。传统的通信方式就像把整本相册邮寄给你,而语义通信则是只告诉你"门口有个穿红衣服的快递员"。这种"说重点"…...

4步实现Android Studio本地化配置:从语言障碍到高效开发

4步实现Android Studio本地化配置:从语言障碍到高效开发 【免费下载链接】AndroidStudioChineseLanguagePack AndroidStudio中文插件(官方修改版本) 项目地址: https://gitcode.com/gh_mirrors/an/AndroidStudioChineseLanguagePack 问题诊断&…...

STM32智慧停车场系统设计与SQLite应用

基于STM32的智慧停车场管理系统设计与实现(SQLite版)1. 项目概述1.1 系统架构本智慧停车场管理系统采用分布式架构设计,由以下核心组件构成:下位机控制单元:STM32F103ZET6微控制器作为主控芯片感知层:OV772…...