[element-ui] el-dialog 中的内容没有预先加载,因此无法获得内部元素的ref 的解决方案

news2024/12/25 1:10:52

问题描述
在没有进行任何操作的时候,使用

this.$refs.xxxx 

无法获取el-dialog中的内部元素,这个问题会导致很多bug.
官方解释,在open事件回调中进行,但是open()是弹窗打开时候的会调,有可能在此处获取的时候,还没有渲染成功,导致依然获取不了。

1、可以通过定时器延时获取

<el-dialog  @opened="openWebRtc()" >
    <!--子组件 -->
   <web-rtc ref="webrtc" v-show="showWebRtcVideo" :videoUrl="WebRtcVideoUrl"></web-rtc>
</el-dialog>
 
openWebRtc(){
   setTimeout(() => {
    this.$refs.webrtc.start();
  }, 0);
},

2、通过opend会调获取

<el-dialog  @opened="openWebRtc()" >
    <!--子组件 -->
   <web-rtc ref="webrtc" v-show="showWebRtcVideo" :videoUrl="WebRtcVideoUrl"></web-rtc>
</el-dialog>
 
openWebRtc(){
   this.$refs.webrtc.start();
},

3、 强制加载dialog中的内容

在这里插入图片描述
使用下面的代码,就是将dialog强制加载一遍,这个因为速度快肉眼是看不见加载的过程的

mounted() {
    this.updateInsertOpen = true //:visible.sync="open"
    this.$refs.updateInsertDialog.rendered = true //updateInsertDialog是dialog的ref;
    this.updateInsertOpen = false
  },


参考:
element-UI 组件 dialog 中 ref 获取不到的问题解决方案

vue中el-dialog 中的内容没有预先加载,因此无法获得内部元素的ref 的解决方案 使用强制提前加载dialog方法

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1251611.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

教师授课技巧

一名教师&#xff0c;授课技巧是提高教学效率和质量的关键。以下是几个实用的授课技巧&#xff0c;可以帮你更好的传授知识&#xff0c;激发学习兴趣。 一、做好课前准备 课前准备是授课技巧的重要环节。认真备课&#xff0c;熟悉教材内容&#xff0c;制定教学计划&#xff0c…

redis运维(二十一)redis 的扩展应用 lua(三)

一 redis 的扩展应用 lua redis加载lua脚本文件 ① 调试lua脚本 redis-cli 通过管道 --pipe 快速导入数据到redis中 ② 预加载方式 1、错误方式 2、正确方式 "案例讲解" ③ 一次性加载 执行命令&#xff1a; redis-cli -a 密码 --eval Lua脚本路径 key …

【Docker】Docker与Kubernetes:区别与优势对比

前言 Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux或Windows操作系统的机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。   kubernetes&#xff0c;简称K8s&a…

MybatisPlus集成baomidou-dynamic,多数据源配置使用、MybatisPlus分页分组等操作示例

文章目录 pom配置示例代码 pom <dependencies><!--mybatisPlus集成SpringBoot起步依赖--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.2</version>&l…

荆涛演唱歌曲《老板的孤独》:孤独中的坚韧与担当

歌手荆涛演唱的《老板的孤独》不仅是一首歌&#xff0c;更是一种情感的宣泄和表达。歌曲中表达了老板们在面对压力、孤独和困难时&#xff0c;依然坚持、积极向前的坚韧精神。每一句歌词都充满了对生活的深刻理解和感悟&#xff0c;以及对团队、家人的深深牵挂。 一、欣喜时要h…

【Netty专题】Netty调优及网络编程中一些问题补充(面向面试学习)

目录 前言阅读对象阅读导航笔记正文一、如何选择序列化框架1.1 基本介绍1.2 在网络编程中如何选择序列化框架1.3 常用Java序列化框架比较 二、Netty调优2.1 CONNECT_TIMEOUT_MILLIS&#xff1a;客户端连接时间2.2 SO_BACKLOG&#xff1a;最大同时连接数2.3 TCP_NODELAY&#xf…

spring-framework-5.2.25.RELEASE源码环境搭建

环境准备 spring-framework-5.2.25.RELEASEIntelliJ IDEA 2022.3.1java version “11.0.20” 2023-07-18 LTSGradle 5.6.4java version “1.8.0_301” 下载spring-framework-5.2.25.RELEASE源码 git clone https://gitee.com/QQ952051088/spring.git cd spring gradlew buil…

车载通信架构 —— 传统车内通信网络FlexRay(较高速度高容错、较灵活拓扑结构)

车载通信架构 —— 传统车内通信网络FlexRay(较高速度高容错、较灵活拓扑结构) 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,…

Mysql 解决Invalid default value for ‘created_at‘

在mysql版本 8.0 和 5.* 之间数据互导的过程中&#xff0c;老是会出现各种错误&#xff0c;比如 这个created_at 一定要有一个默认值&#xff0c; 但是我加了 default null 还是会报错&#xff0c;于是对照了其他的DDL 发现&#xff0c;需要再加 null default null 才行&#…

Element-UI Upload 手动上传文件的实现与优化

文章目录 引言第一部分&#xff1a;Element-UI Upload 基本用法1.1 安装 Element-UI1.2 使用 <el-upload> 组件 第二部分&#xff1a;手动上传文件2.1 手动触发上传2.2 手动上传时的文件处理 第三部分&#xff1a;性能优化3.1 并发上传3.2 文件上传限制 结语 &#x1f38…

软件测试 | 解决‘pip‘ 不是内部或外部命令,也不是可运行的程序或批处理文件

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

车载通信架构 —— 传统车内通信网络LIN总线(低成本覆盖低速场景)

车载通信架构 —— 传统车内通信网络LIN总线(低成本覆盖低速场景) 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是…

前缀和+哈希表——974. 和可被 K 整除的子数组

文章目录 &#x1fa81;1. 题目&#x1f3a3;2. 算法原理&#x1fa84;解法一&#xff1a;暴力枚举&#x1fa84;解法二&#xff1a;前缀和 哈希表 ⛳3. 代码实现 &#x1fa81;1. 题目 题目链接&#xff1a;974. 和可被 K 整除的子数组 - 力扣&#xff08;LeetCode&#xff0…

【室内定位系统源码】UWB超宽带定位技术的特点和应用前景

uwb人员、物品定位系统源码&#xff0c;智慧工厂人员安全管理定位&#xff0c;高精度定位系统源码 UWB超宽带定位技术概念&#xff1a; 超宽带无线通信技术&#xff08;UWB&#xff09;是一种无载波通信技术&#xff0c;UWB不使用载波&#xff0c;而是使用短的能量脉冲序…

QEMU Guest Agent本地提权漏洞处理(CVE-2023-0664)

一、漏洞描述 QEMU Guest Agent&#xff08;qga&#xff09;类似于vmware中的 vmtools&#xff0c;相关安全报告显示它的Windows版本安装程序存在本地提权高危漏洞&#xff08;CVE-2023-0664&#xff09;&#xff0c;攻击者可利用该漏洞进行本地权限提升&#xff0c;获得SYSTE…

【图数据库实战】图数据库基本概念

1、图数据库的概念 维基百科图书库的概念&#xff1a; 在计算机科学中&#xff0c;图数据库&#xff08;英语&#xff1a;graph database&#xff0c;GDB&#xff09;是一个使用图结构进行语义查询的数据库&#xff0c;它使用节点、边和属性来表示和存储数据。该系统的关键概念…

2024年天津天狮学院专升本护理学专业《内外科护理学》考试大纲

天津天狮学院2024年护理学专业高职升本入学考试《内外科护理学》考试大纲 一、考试性质 《内外科护理学》专业课程考试是天津天狮学院护理专业高职升本入学考试的必考科目之一&#xff0c;其性质是考核学生是否达到了升入本科继续学习的要求而进行的选拔性考试。《内外科护理学…

142.【Nginx负载均衡-01】

Nginx_基础篇 (一)、Nginx 简介1.背景介绍(1).http和三大邮局协议(2).反向代理与正向代理 2.常见服务器对比(1).公司介绍(2).lls 服务器(3).Tomcat 服务器(4).Apache 服务器(5).Lighttpd 服务器(6).其他的服务器 3.Nginx的优点(1).速度更快、并发更高(2).配置简单&#xff0c;扩…

apollo云实验:借道绕行场景仿真调试(9.0版)

借道绕行场景仿真调试&#xff08;9.0版&#xff09; 概述仿真目标与需求模型构建与数据准备仿真实验与结果分析 启动仿真环境实现任务功能修改全局配置参数 福利活动 主页传送门&#xff1a;&#x1f4c0; 传送 概述 在现代交通系统中&#xff0c;借道绕行是一种常见的交通管…

2021年全国硕士研究生入学统一考试管理类专业学位联考数学试题——解析版

文章目录 2021 年 1 月份管综初数真题一、问题求解&#xff08;本大题共 5 小题&#xff0c;每小题 3 分&#xff0c;共 45 分&#xff09;下列每题给出 5 个选项中&#xff0c;只有一个是符合要求的&#xff0c;请在答题卡上将所选择的字母涂黑。真题&#xff08;2014-01&…