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

问题描述

在没有进行任何操作的时候,使用

this.$refs.xxxx 

无法获取el-dialog中的内部元素,这个问题会导致很多bug,其中目前网络上也有许多关于这个问题的解决方案,但是大多数是使用el-dialog中的@open在dialog打开的时候使用this.$nextTick进行操作

如果你想用上面的方法,可以参考https://blog.csdn.net/weixin_43227235/article/details/130849126

这里介绍另一种解决方法,强制加载dialog中的内容

给dialog添加一个ref

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

mounted() {
    this.updateInsertOpen = true //:visible.sync="open"
    this.$refs.updateInsertDialog.rendered = true //updateInsertDialog是dialog的ref;
    this.updateInsertOpen = false
  },
相关推荐
小胖伦的夕阳粉20 分钟前
js 获取树节点上某节点的最底层叶子节点数据
开发语言·javascript·ecmascript
@听风吟36 分钟前
力扣之182.查找重复的电子邮箱
大数据·javascript·数据库·sql·leetcode
码力码力我爱你1 小时前
QT + WebAssembly + Vue环境搭建
vue.js·vue·wasm·webassembly·emscripten
唐家小妹1 小时前
【flex-grow】计算 flex弹性盒子的子元素的宽度大小
前端·javascript·css·html
洛千陨1 小时前
element-plus弹窗内分页表格保留勾选项
前端·javascript·vue.js
小小19921 小时前
elementui 单元格添加样式的两种方法
前端·javascript·elementui
完球了2 小时前
【Day02-JS+Vue+Ajax】
javascript·vue.js·笔记·学习·ajax
前端没钱2 小时前
若依Nodejs后台、实现90%以上接口,附体验地址、源码、拓展特色功能
前端·javascript·vue.js·node.js
dgiij2 小时前
AutoX.js向后端传输二进制数据
android·javascript·websocket·node.js·自动化
纳尼亚awsl3 小时前
无限滚动组件封装(vue+vant)
前端·javascript·vue.js