[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方法

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[多线程】线程安全问题

目录 1.举个栗子 2.线程安全的概念 3.线程不安全的原因 3.1原子性 3.2Java内存模型&#xff08;jvm&#xff09; 3.3代码重排序 4.解决线程的不安全问题-&#xff08;synchronized&#xff09; ​编辑 4.1sychronized的特性 4.2刷新内存 4.3可重入 5.synchornized使…

「Verilog学习笔记」数据累加输出

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 在data_out准备好&#xff0c;valid_b拉高时&#xff0c;如果下游的ready_b为低&#xff0c;表示下游此时不能接收本模块的数据&#xff0c;那么&#xff0c;将会拉低ready…

JMeter 测试脚本编写技巧

JMeter 是一款开源软件&#xff0c;用于进行负载测试、性能测试及功能测试。测试人员可以使用 JMeter 编写测试脚本&#xff0c;模拟多种不同的负载情况&#xff0c;从而评估系统的性能和稳定性。以下是编写 JMeter 测试脚本的步骤。 第 1 步&#xff1a;创建测试计划 在JMet…

【Python百宝箱】Python轻松操控邮件:SMTP、POP3和IMAP的魅力

前言 在数字时代&#xff0c;电子邮件作为信息传递的主要手段&#xff0c;对个人和企业的日常工作至关重要。Python提供了多个强大的库&#xff0c;使得电子邮件的发送和接收变得轻松而灵活。本文将深入介绍Python中与电子邮件相关的主要库&#xff0c;为读者提供从基础到高级…

每日一题--删除链表的倒数第 N 个结点

破阵子-晏殊 燕子欲归时节&#xff0c;高楼昨夜西风。 求得人间成小会&#xff0c;试把金尊傍菊丛。歌长粉面红。 斜日更穿帘幕&#xff0c;微凉渐入梧桐。 多少襟情言不尽&#xff0c;写向蛮笺曲调中。此情千万重。 目录 题目描述&#xff1a; 思路分析&#xff1a; 方法及…

全面(16万字)深入探索深度学习:基础原理到经典模型网络的全面解析

前言 Stacking(堆叠) 网页调试 学习率&#xff1a;它决定了模型在每一次迭代中更新参数的幅度激活函数-更加详细 激活函数的意义: 激活函数主要是让模型具有非线性数据拟合的能力&#xff0c;也就是能够对非线性数据进行分割/建模 如果没有激活函数&#xff1a; 第一个隐层: l…

关于python中的nonlocal关键字

如果在函数的子函数中需要调用外部变量&#xff0c;一般会看见一个nonlocal声明&#xff0c;类似下面这种&#xff1a; def outer_function():x 10def inner_function():nonlocal xx 1print(x)inner_function()outer_function()在这个例子中&#xff0c;inner_function 引用…

[HCIE] IPSec-VPN (IKE自动模式)

概念&#xff1a; IKE&#xff1a;因特网密钥交换 实验目标&#xff1a;pc1与pc2互通 步骤1&#xff1a;R1与R3配置默认路由 R1&#xff1a; ip route-static 0.0.0.0 0.0.0.0 12.1.1.2 R2&#xff1a; ip route-static 0.0.0.0 0.0.0.0 23.1.1.2 步骤2&#xff1a;配ACL…

Java数组的复制、截取(内含例题:力扣-189.轮转数组)

目录 数组的复制、截取&#xff1a; 1、使用Arrays中的copyOf方法完成数组的拷贝 2、使用Arrays中的copyofRange方法完成数组的拷贝 题目链接&#xff1a; 数组的复制、截取&#xff1a; 1、使用Arrays中的copyOf方法完成数组的拷贝 public class Csdn {public static vo…

vscode的下载安装与配置【超详细】

1、下载 进入vscode官网 打开浏览器的下载内容管理&#xff0c;找到vscode下载任务&#xff0c;鼠标放在下载链接上并右击&#xff0c;点击复制链接地址 下载太慢&#xff1f;使用国内镜像 打开新窗口粘贴地址&#xff0c;并将域名改为&#xff1a;vscode.cdn.azure.cn&am…

ZKP11.4 Use CI to instantiate Fiat-Shamir

ZKP学习笔记 ZK-Learning MOOC课程笔记 Lecture 11: From Practice to Theory (Guest Lecturer: Alex Lombardi) 11.4 Use CI to instantiate Fiat-Shamir Avoid Bad Challenges Def: Given false claim x x x and a first message α \alpha α, a challenge β \beta …

JAVA小游戏“简易版王者荣耀”

第一步是创建项目 项目名自拟 第二部创建个包名 来规范class 然后是创建类 GameFrame 运行类 package com.sxt;import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; im…

java集合,ArrayList、LinkedList和Vector,多线程场景下如何使用 ArrayList

文章目录 Java集合1.2 流程图关系1.3 底层实现1.4 集合与数组的区别1.4.1 元素类型1.4.2 元素个数 1.5 集合的好处1.6 List集合我们以ArrayList集合为例1.7 迭代器的常用方法1.8 ArrayList、LinkedList和Vector的区别1.8.1 说出ArrayList,Vector, LinkedList的存储性能和特性1.…

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

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

解决PDF预览时,电子签章、日期等不显示问题

文章目录 问题描述问题排查问题解决 问题描述 在预览PDF时&#xff0c;部分签章或控件没有显示。如下图&#xff1a; 正确应该要这样&#xff1a; 问题排查 根据网上搜索&#xff0c;排查&#xff0c;我先看看&#xff0c;pdf.worker.js 里的这三行代码&#xff0c;是否已经注…

无需API开发,有赞小程序集成广告推广系统,提升品牌曝光

无需API开发&#xff0c;实现有赞小程序与其他系统的连接 有赞小程序作为一个多功能的电子商务解决方案&#xff0c;为商家提供了无需复杂API开发就可以实现系统连接和集成的便捷途径。通过有赞小程序&#xff0c;商家可以轻松实现与各种系统的数据同步和应用互联&#xff0c;…

【机器学习】聚类(二):原型聚类:LVQ聚类(学习向量量化)

文章目录 一、实验介绍1. 算法流程2. 算法解释3. 算法特点4. 应用场景5. 注意事项 二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 导入必要的库1. LVQ类a. 构造函数b. 闵可夫斯基距离c. LVQ聚类过程e. 聚类结果可视化 2. 辅助函数3. 主函数a. 命令行界面 &#xff…

【MATLAB】VMD分解+FFT+HHT组合算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 VMD&#xff08;Variational Mode Decomposition&#xff09;是一种信号分解方法&#xff0c;基于HHT&#xff08;Hilbert-Huang Transform&#xff0c;希尔伯特-黄变换&#xff09;。HH…

3、点亮一个LED

新建工程 project—>New uVision Project LED介绍 中文名&#xff1a;发光二极管 外文名&#xff1a;Light Emitting Diode 简称&#xff1a;LED 用途&#xff1a;照明、广告灯、指引灯 电路图分析 进制的转换 生成下载文件&#xff1a; 代码 //导包 #inclu…

Javascript每天一道算法题(十八)——矩阵置零-中等

文章目录 1、问题2、示例3、解决方法&#xff08;1&#xff09;方法1——标记数组 1、问题 给定一个 y x x 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 2、示例 示例 1&#xff1a; 输入&#xff1a;matrix [[…