AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

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

2024-08-16 3785
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章分享了解决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方法解决

文章标签：
JavaScript
热爱技术的小郑
目录
相关文章
a15034260562-24955
|
前端开发
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
elementui解决el-dialog不清空内容的问题,el-dialog关闭时销毁子组件
a15034260562-24955
2465 0
欧阳呀
|
UED
element el-cascader动态加载数据 （多级联动，落地方案）
最近需要用到element ui的这个插件做地区的四级联动，但是碰了一些问题： 官网的说明太泛泛然，不易看懂 网上的教程乱七八糟，代码一堆一堆的 看这篇就对了！！！
欧阳呀
2591 0
element el-cascader动态加载数据 （多级联动，落地方案）
兜里只有三分钱~
element el-cascader动态编辑赋值后，不回显的解决方法（整理）
element el-cascader动态编辑赋值后，不回显的解决方法（整理）
兜里只有三分钱~
2595 0
XinMo
input、el-input输入框只能输入正整数（包含或不包含0)
业务
XinMo
8684 0
XinMo
|
前端开发
vue3利用 a 标签，文件流，JSZip 压缩包，实现文件下载
功能
XinMo
1628 0
n2t3mdveprf54
|
JavaScript
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
n2t3mdveprf54
2800 0
Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信
Yaiba123
|
数据格式
使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧，包括多列合并和单列合并的方法，并提供了相应的示例代码和运行效果。
Yaiba123
10363 46
使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用
郭晟玮
|
JavaScript
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题？
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题？
郭晟玮
1330 3
游客lijmi4663rgsa
|
11月前
|
前端开发 API
el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能，利用@sort-change实现动态数据排序，el-table排序方法，el-table可变数据的动态排序
博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
1778 0
chnjames
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器，包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构，用户可以通过下拉选择树形节点，实时搜索节点，且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现，帮助开发者快速集成此功能。
chnjames
5641 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能

热门文章

最新文章

  • 1
    CentOS yum源设置为国内aliyun yum源
  • 2
    Rust 笔记：Rust 语言中使用 vector（向量）
  • 3
    PS内容识别填充让图片闹鬼？新升级消灭乱涂乱画，让你刮目相看
  • 4
    Swagger接口文档 —— 手把手教学，全方位超详细小白能看懂，百分百能用Java版
  • 5
    thymeleaf实现ajax请求的两种方式
  • 6
    史上首次现场直播下线物理机，三维家全面上云
  • 7
    A.3-C# 面向对象编程
  • 8
    ASP.NET常被忽视的一些细节
  • 9
    如何从微信公众平台上下载关注用户(备份微信关注用户)
  • 10
    加入收藏兼容ie和火狐
  • 1
    DiTASK：用“橡皮泥手术”改造ViT，一次搞定多个视觉任务
    38
  • 2
    Vue3项目JSON格式化工具技术实现详解
    84
  • 3
    PPO算法深度解析：为什么它如此强大又如此“挑食”？
    43
  • 4
    JSON格式化与压缩 在线工具分享
    48
  • 5
    为什么GEO优化是新的内容战略核心？尹邦奇三层结构模型深度解读
    37
  • 6
    记一次静态博客前端问题的优化：针对FOUC问题的解决方案
    50
  • 7
    《羁绊型反派塑造：情感闭环与角色立体度打造指南》
    31
  • 8
    《动态捕食猎物关系手册：生态可信性构建与玩家长期行为响应策略》
    33
  • 9
    3分钟让Chrome变聪明！Google AI保姆级激活教程！
    169
  • 10
    【SSVEP】基于SSVEP检测频率导向脑活动的VR实验附Matlab代码
    31

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    第五届伏魔挑战赛如约来袭，诚邀各路高手来战！