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

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

2024-08-16 3977
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章分享了解决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
2579 0
TE-茶叶蛋
|
JavaScript 数据安全/隐私保护
vue3+element-plus权限控制实现(el-tree父子级不关联情况处理)
后台管理系统常见的权限控制需求，这里讲button实现交互细节处理， 取消选中子级menu/button，父级不关联取消； 选中/取消父级catalog/menu，子级全部选中/取消； 选中/取消部分子级menu/button，父级关联半选中状态（indeterminate=true）；
TE-茶叶蛋
921 2
兜里只有三分钱~
element el-cascader动态编辑赋值后，不回显的解决方法（整理）
element el-cascader动态编辑赋值后，不回显的解决方法（整理）
兜里只有三分钱~
2770 0
XinMo
input、el-input输入框只能输入正整数（包含或不包含0)
业务
XinMo
8954 0
郭晟玮
|
JavaScript
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题？
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题？
郭晟玮
1459 3
博客zhu虎康
|
JavaScript
Element_select 选择器 选中框中显示不了选中的值
解决Vue中`el-select`选择器不显示选中值的问题：在`selectChanged`方法中添加`this.$forceUpdate()`，强制组件更新，使输入框显示选择的值。示例代码包括模板和方法。
博客zhu虎康
1858 2
chnjames
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器，包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构，用户可以通过下拉选择树形节点，实时搜索节点，且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现，帮助开发者快速集成此功能。
chnjames
6217 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
邹荣乐
|
API
Vue3组件通信全解析：利用props、emit、provide/inject跨层级传递数据，expose与ref实现父子组件方法调用
Vue3组件通信全解析：利用props、emit、provide/inject跨层级传递数据，expose与ref实现父子组件方法调用
邹荣乐
4556 0
小猫娃来啦
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
小猫娃来啦
7038 0

热门文章

最新文章

  • 1
    让龙虾成为你的“公众号分身” | 阿里云服务器玩Openclaw
  • 2
    2026年国内 Codex 安装教程和使用教程：GPT-5.4 完整指南
  • 3
    Claude Code 命令体系解析：三种类型、七大分类、50+ 命令
  • 4
    阿里云千问Token价格怎么收费？2026年最新手动整理AI大模型收费标准
  • 5
    5分钟上手龙虾AI！OpenClaw部署（阿里云+本地）+ 免费多模型配置保姆级教程（MiniMax、Claude、阿里云百炼）
  • 6
    聊聊 AI 的 token 到底是啥？
  • 7
    putty下载、安装和使用教程（保姆级，图文并茂）：putty中文版远程管理工具详解
  • 8
    离线AI部署终极手册：OpenClaw+Ollama本地模型匹配、全环境搭建与问题一站式解决
  • 9
    本地私有化AI助手搭建指南：Ollama+Qwen3.5-27B+OpenClaw阿里云/本地部署流程
  • 10
    Coding Plan扫盲贴：阿里云百炼Coding Plan费用价格、Lite和Pro版用量限制及使用教程
  • 1
    TokenPlan是什么？阿里云百炼Token Plan详细解析：Credits计费、模型生态、省钱技巧与配置指南
    58
  • 2
    AI时代安全先行 · 共筑Agent生态防护网 —— 阿里云用户组（AUG）专场活动回顾
    1050
  • 3
    阿里Qwen3.6-27B正式开源：网友直呼“太牛了”！
    262
  • 4
    Qwen3.6发布27B Dense模型，提供旗舰级编程能力，魔搭Serverless训练服务Day0支持
    61
  • 5
    AI开发实战4、AI总是忘记项目规范？因为你缺了这份终极上下文文件
    52
  • 6
    深入源码：Hermes Agent 如何实现 "Self-Improving"
    67
  • 7
    深度科普：Hermes Agent 详细介绍及一键部署实操教程
    77
  • 8
    TokenPlan是什么？阿里云百炼Token Plan按Credits计费，Token省钱指南
    101
  • 9
    阿里云百炼 Token Plan 与 Coding Plan：定位、差异与选择指南
    135
  • 10
    别再买Coding Plan了，阿里云百炼Token Plan团队版全新升级，支持文本和图像ai大模型
    74

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    开通oss服务