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

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

相关文章:

  • Nginx模块开发之http handler实现流量统计(1)
  • 怎么使用sentinel,以及所有的知识点
  • 开发知识点-ArkTS-鸿蒙开发-Typescript
  • 用 Addon 增强 Node.js 和 Electron 应用的原生能力
  • docker容器生成镜像并上传个人账户
  • 在浏览器中直接打开PDF
  • 网站被流量攻击了,该怎么处理
  • 离别已久,今再相聚
  • 云原生系列Go语言篇-编写测试Part 2
  • 单细胞seurat入门—— 从原始数据到表达矩阵
  • 【SpringCloud】设计原则之单一职责与服务拆分
  • ubuntu22.04安装swagboot遇到的问题
  • 系统架构设计: 21 论敏捷软件开发方法及其应用
  • 从源码重新真正认识RateLimiter(SmoothBursty实现)
  • 在CentOS 7上设置防火墙开启端口访问
  • [分享]iOS开发-关于在xcode中引用文件夹右边出现问号的解决办法
  • 0基础学习移动端适配
  • Android Studio:GIT提交项目到远程仓库
  • Centos6.8 使用rpm安装mysql5.7
  • CoolViewPager:即刻刷新,自定义边缘效果颜色,双向自动循环,内置垂直切换效果,想要的都在这里...
  • es6--symbol
  • EventListener原理
  • Git初体验
  • iOS 系统授权开发
  • iOS动画编程-View动画[ 1 ] 基础View动画
  • iOS小技巧之UIImagePickerController实现头像选择
  • Java应用性能调优
  • js
  • leetcode98. Validate Binary Search Tree
  • node学习系列之简单文件上传
  • Redash本地开发环境搭建
  • spring + angular 实现导出excel
  • Webpack 4x 之路 ( 四 )
  • 飞驰在Mesos的涡轮引擎上
  • 机器学习学习笔记一
  • 技术攻略】php设计模式(一):简介及创建型模式
  • 聚簇索引和非聚簇索引
  • 实习面试笔记
  • 适配mpvue平台的的微信小程序日历组件mpvue-calendar
  • 数据科学 第 3 章 11 字符串处理
  • 新书推荐|Windows黑客编程技术详解
  • #基础#使用Jupyter进行Notebook的转换 .ipynb文件导出为.md文件
  • (2)(2.10) LTM telemetry
  • (C++)栈的链式存储结构(出栈、入栈、判空、遍历、销毁)(数据结构与算法)
  • (react踩过的坑)antd 如何同时获取一个select 的value和 label值
  • (超详细)2-YOLOV5改进-添加SimAM注意力机制
  • (附源码)spring boot球鞋文化交流论坛 毕业设计 141436
  • (附源码)springboot炼糖厂地磅全自动控制系统 毕业设计 341357
  • (解决办法)ASP.NET导出Excel,打开时提示“您尝试打开文件'XXX.xls'的格式与文件扩展名指定文件不一致
  • (六)Hibernate的二级缓存
  • (原創) 如何優化ThinkPad X61開機速度? (NB) (ThinkPad) (X61) (OS) (Windows)
  • (转)winform之ListView
  • ./configure、make、make install 命令
  • .【机器学习】隐马尔可夫模型(Hidden Markov Model,HMM)
  • .htaccess配置常用技巧