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

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

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.mzph.cn/news/169414.shtml

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

相关文章

03 _ 系统设计目标(一):如何提升系统性能?

提到互联网系统设计&#xff0c;可能听到最多的词就是“三高”&#xff0c;也就是“高并发”“高性能”“高可用”&#xff0c;它们是互联网系统架构设计永恒的主题。这里将整体探讨下高并发系统设计的目标&#xff0c;然后在此基础上&#xff0c;探讨下&#xff1a;如何提升系…

Python---函数的参数类型----位置参数(不能顺序乱)、关键词参数(键值对形式,顺序可乱)

位置参数 理论上&#xff0c;在函数定义时&#xff0c;可以为其定义多个参数。但是在函数调用时&#xff0c;也应该传递多个参数&#xff0c;正常情况&#xff0c;要一一对应。 相关链接&#xff1a;Python---函数的作用&#xff0c;定义&#xff0c;使用步骤&#xff08;调用…

Python基础:JSON保存结构化数据(详解)

1. JSON概念 JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;易于人阅读和编写&#xff0c;也易于机器解析和生产。   虽然JSON使用JavaScript语法来描述数据对象&#xff0c;但是JSON仍然独立于语言和平台&#xff0c;JSON解…

二开的基础资料设置 为辅助核算项目的两种方式

一、第一种 自己插入相关表数据 T_BD_AsstActType //辅助核算项目表 insert into T_BD_AsstActType(FID, FName_L1, FName_L2, FName_L3, FNumber, FDescription_L1, FDescription_L2, FDescription_L3, FSimpleName, FAssistantType, FIsSelfAsstActaiatem, FIsSystemA…

HTML新特性【缩放图像、图像切片、平移、旋转、缩放、变形、裁切路径、时钟、运动的小球】(二)-全面详解(学习总结---从入门到深化)

目录 绘制图像_缩放图像 绘制图像_图像切片 Canvas状态的保存和恢复 图形变形_平移 图形变形_旋转 图形变形_缩放 图形变形_变形 裁切路径 动画_时钟 动画_运动的小球 引入外部SVG 绘制图像_缩放图像 ctx.drawImage(img, x, y, width, height) img &#xf…

每日一题:LeetCode-103/107.二叉树的(层序/锯齿形层序)遍历

每日一题系列&#xff08;day 04&#xff09; 前言&#xff1a; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f50e…

AD9528学习笔记

前言 AD9528是ADI的一款时钟芯片&#xff0c;由2-stage PLL组成&#xff0c;并且集成JESD204B/JESD204C SYSREF信号发生器&#xff0c;SYSREF发生器输出单次、N次或连续信号&#xff0c;并与PLL1和PLL2输出同步&#xff0c;从而可以实现多器件之间的同步。 AD9528总共有14路输…

JMeter+Python 实现异步接口测试

当使用JMeter和Python来实现异步接口测试时&#xff0c;可以按照以下步骤进行操作&#xff1a; 1、安装JMeter和Java Development Kit&#xff08;JDK&#xff09;&#xff1a; 下载并安装JMeter&#xff08;https://jmeter.apache.org/download_jmeter.cgi&#xff09;和适用…

性能优化中使用Profiler进行内存泄露的排查及解决方式

文章目录 一、前言二、内存泄露的排查方式三、参考链接 一、前言 对于常规意义上的线程使用要及时关闭&#xff0c;数据库用完要及时关闭&#xff0c;数据用完要及时清空等等这里不再赘述&#xff0c;但是在开发中总会有不熟悉的api&#xff0c;开发进度过快&#xff0c;开发人…

网络通信基础概念介绍

网络通信基础概念介绍 局域网LAN 局域网&#xff0c;即 Local Area Network&#xff0c;简称LAN。 局域网内的主机之间能方便的进行网络通信&#xff0c;又称为内网&#xff1b;局域网和局域网之间在没有连接的情况下&#xff0c;是无法通信的。 局域网是指在一个相对较小的…

【【linux C 编程记述 之 VIM的用法讲述】】

linux C 编程记述 之 VIM的用法讲述 我们所说的编写代码包括两部分&#xff1a;代码编写和编译&#xff0c;在Windows下可以使用Visual Studio来完成这两部&#xff0c;可以在 Visual Studio 下编写代码然后直接点击编译就可以了。但是在 Linux 下这两部分是分开的&#xff0c…

Linux:Ubuntu虚拟机安装详解:VMware下的逐步指南

目录 1. centOS系统 2. ubuntu系统 1. 下载Ubuntu映像 step1 step2 step3 2. 新建虚拟机 step1 step2 Step3 step4 step5 step6 内存 内核 映像 显示 网络 3. 网络配置 NAT模式 本机IP获取 ​编辑 bridge模式 4. 开启虚拟机 5. 虚拟机常用配置 语言 …

Linux | 重定向 | 文件概念 | 查看文件 | 查看时间 | 查找文件 | zip

Linux | 重定向 | 文件概念 | 查看文件 | 查看时间 | 查找文件 | zip 文章目录 Linux | 重定向 | 文件概念 | 查看文件 | 查看时间 | 查找文件 | zip一、more1.1 输出重定向>和>>1.2 输入重定向< 二、 再谈一切皆文件三、less指令【重要】四、head指令五、tail指令…

Banana Pi BPI-R3 Mini 开源路由器,也能拍出艺术美感

香蕉派BPI-R3 Mini路由器板开发板采用联发科MT7986A(Filogic 830)四核ARM A53芯片设计&#xff0c;板载2G DDR 内存&#xff0c;8G eMMC和128MB SPI NAND存储&#xff0c;是一款非常高性能的开源路由器开发板&#xff0c;支持Wi-Fi6 2.4G/5G&#xff08;MT7976C&#xff09;&am…

ACL权限

ACL权限 目录&#xff1a; 1. 什么是ACL 2. 操作步骤 1. 什么是ACL ACL是Access Control List的缩写&#xff0c;即访问控制列表 每个项目成员在有一个自己的项目目录&#xff0c;对自己的目录有完全权限 项目组中的成员对项目目录也有完全权限 其他人对项目目录没有…

Ubuntu 安装 JMeter:轻松上手

Apache JMeter 是一个开源的负载测试工具&#xff0c;可以用于测试静态和动态资源&#xff0c;确定服务器的性能和稳定性。在本文中&#xff0c;我们将讨论如何下载和安装 JMeter。 安装 Java&#xff08;已安装 Java 的此步骤可跳过&#xff09; 要下载 Java&#xff0c;请遵…

JSP:JDBC

JDBC&#xff08;Java Data Base Connectivity的缩写&#xff09;是Java程序操作数据库的API&#xff0c;也是Java程序与数据库相交互的一门技术。 JDBC是Java操作数据库的规范&#xff0c;由一组用Java语言编写的类和接口组成&#xff0c;它对数据库的操作提供基本方法&#…

leetCode 226.翻转二叉树

给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 226. 翻转二叉树 - 力扣&#xff08;LeetCode&#xff09; 示例 1: 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1] 示例 2&#xff1a; 输入&#xff1a;root…

AR眼镜双目光波导/主板硬件方案

AR(增强现实)技术的发展离不开光学元件&#xff0c;而在其中&#xff0c;光波导和Micro OLED被视为AR眼镜光学方案的黄金搭档。光学元件在AR行业中扮演着核心角色&#xff0c;其成本高昂且直接影响用户体验的亮度、清晰度和大小等因素。AR眼镜的硬件成本中&#xff0c;光机部分…