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
  },
相关推荐
AC-PEACE15 分钟前
Vue 中 MVVM、MVC 和 MVP 模式的区别
前端·vue.js·mvc
冷琴199626 分钟前
基于Python+Vue开发的反诈视频宣传管理系统源代码
开发语言·vue.js·python
程楠楠&M1 小时前
uni-app(位置1)
前端·javascript·uni-app·node.js
破z晓1 小时前
uniapp 整合openlayers 编辑图形文件并上传到服务器
前端·javascript·uni-app
m0_748257461 小时前
创建一个简单的spring boot+vue前后端分离项目
vue.js·spring boot·后端
祈澈菇凉1 小时前
除了Axios,如何用fetch处理403错误?
前端·javascript·vue.js
草字1 小时前
vue,vue3 keepalive没有效果,无法缓存页面include无效,keep-alive
前端·vue.js·缓存
JSON_L2 小时前
Vue Axios
前端·javascript·vue.js
狐凄2 小时前
练习题:47
开发语言·前端·javascript
没有晚不了安2 小时前
1.16作业
java·前端·javascript