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
  },
相关推荐
雪芽蓝域zzs22 分钟前
第二十二节:进阶:用户管理新增、编辑弹窗 + 表单校验
前端·javascript·vue.js
shmily麻瓜小菜鸡31 分钟前
JavaScript / TypeScript 易踩坑知识点 —— 作用域与变量类
开发语言·javascript·typescript
变与不变8061 小时前
JS作用域,作用域链
前端·javascript·es6
计算机学姐1 小时前
基于SpringBoot的高校爱心慈善管理系统
java·vue.js·spring boot·后端·spring·tomcat·mybatis
雪芽蓝域zzs1 小时前
二十一节:进阶:用户列表批量删除功能
前端·javascript·vue.js
研☆香1 小时前
可选链运算符和空值合并运算符的使用
前端·javascript·vue.js
雪芽蓝域zzs1 小时前
第二十七节:进阶:路由权限控制 + 404 / 401 全局异常页面开发
前端·javascript·html
光影少年2 小时前
react navite 简单原生方法双向调用示例
javascript·react native·react.js
zzzzzz3102 小时前
react-bits:把“酷炫组件”放回 React 组件化的语境里看
javascript·react.js·动效
平头哥技术团队11 小时前
Day 10 | 工欲善其事:VS Code 配置与项目归档
android·开发语言·前端·javascript·html·交互