成功解决:el-dialog弹出窗口、数据第一次没有加载、第二次打开才能加载数据。(每次页面刷新后、第一次打开dialog窗口、图片数不加载)

简介: 这篇文章分享了解决Vue中`el-dialog`弹出窗口在第一次打开时数据未加载问题的技巧,通过改变组件的`key`属性来强制Vue重新渲染DOM,从而确保数据正确加载。

1、问题描述

在查看图片的时候、点击预览按钮,将图片放入dialog弹出框中。然而每次页面刷新、首次预览图片、打开的窗口中并没有图片展示???

1.1 缺陷视频展示

Dialog问题缺陷


2、解决方法

2.1、使用官网自带的方法opened

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

2.1.1 实现效果视频展示

使用dialog自带方法解决


2.2、使用$nextTick

在这里插入图片描述
在这里插入图片描述

2.2.1 实现效果视频展示

使用nextTick方法解决


相关文章
|
6月前
|
前端开发 网络安全 数据库
使用layui弹框实现添加时,当添加成功之后如何进行关闭当前窗口刷新父页面的数据
使用layui弹框实现添加时,当添加成功之后如何进行关闭当前窗口刷新父页面的数据
点击button页面重新加载刷新
点击button页面重新加载刷新
62 0
element弹出框关闭并销毁:清空弹出里的数据缓存(整理)
element弹出框关闭并销毁:清空弹出里的数据缓存(整理)
element ui 上传图片之后跳转、刷新、保存,预览和删除丢失问题
这问题困惑了我好久,在官方的element ui 的组件库中,直接拿来使用的话,只有当前显示效果,一旦刷新页面或者保存之后,就会丢失,预览和删除功能。当保存后,保存到后端接口,再次查看,图片是能渲染出来,但是由于保存页面刷新,随之整个上传过程失败,而查看所拿到的图片只是一张静态图片,要想再次预览和查看,需要重新选中上传
235 0
|
Web App开发 JavaScript 前端开发
加载Flash、禁用JS脚本、滚动页面至元素、缩放页面
Selenium很多难解决的问题,我们要首先想到从JS脚本出发,毕竟Selenium还是支持驱动浏览器运行JS脚本的。 这篇文章的内容主要是Selenium日常开发中会遇到的坑,以Java代码为主,当然Python的小伙伴不用担心,这里所有的解决方案都是可以在Python中通用的。
280 0
【layer】ifreme弹出层问题,导致代码失效 ——关闭当前弹出层
【layer】ifreme弹出层问题,导致代码失效 ——关闭当前弹出层
122 0
【layer】ifreme弹出层问题,导致代码失效 ——关闭当前弹出层
|
JavaScript 前端开发
js实现页面滑动到最底部触发内容加载
js实现页面滑动到最底部触发内容加载
438 0
|
存储 小程序 iOS开发
iOS 小知识: 再次点击tabBar刷新界面数据(更新数据期间旋转tabbar图标)【包含完整demo】
iOS 小知识: 再次点击tabBar刷新界面数据(更新数据期间旋转tabbar图标)【包含完整demo】
541 0
iOS 小知识: 再次点击tabBar刷新界面数据(更新数据期间旋转tabbar图标)【包含完整demo】
|
JavaScript 前端开发
页面一刷新让文本框自动获取焦点-- 和自定义v-focus指令
页面一刷新让文本框自动获取焦点-- 和自定义v-focus指令