element-ui dialog 子组件参数更新滞后

最新推荐文章于 2023-11-02 09:31:23 发布

银月流霜

最新推荐文章于 2023-11-02 09:31:23 发布

阅读量882

点赞数 2

分类专栏： Debug日志文章标签： vue elementui

本文链接：https://blog.csdn.net/angus52630/article/details/111055690

版权

在使用Element-UI的Dialog组件并嵌套子组件时，发现点击更新按钮，子组件无法根据最新的update_code刷新数据，表现为显示上一次的值。问题在于尽管设置了:destroy-on-close="true"，子组件并未销毁，导致props值存在缓存。通过在子组件上添加v-if，使其随Dialog一起销毁，从而解决了数据更新滞后的问题。

摘要由CSDN通过智能技术生成

项目场景：

使用element-ui dialog组件时，嵌套了一个子组件

<el-dialog
      title="Update Template"
      :before-close="handleClose"
      :visible.sync="update_dialog"
      :destroy-on-close="true"
    >

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

银月流霜

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Dialog组件不刷新的问题

LAHM8963的博客

01-04

1669

同时监听visible和name的变化，只要弹窗打开，便获取设备名称，然后执行逻辑函数，问题解决。

elementui 再次打开dialog，绑定的数据不更新问题

popstarqq的博客

08-30

3467

1 因为dialog再次打开时不经过重新渲染dom，只是简单的显示隐藏，所以第一次打开绑定值后，关闭再打开则不会更新，解决办法是在外层套一层div，用v-if控制 <div v-if="editDialog_visual" > <el-dialog :area="[700,600]" top="middle" no-scrollbar title="人员编辑"

参与评论您还未登录，请先登录后发表或查看评论

el-dialog的内容不刷新；el-dialog内容有缓存；el-dialog里面的组件不刷新问题；

i_am_a_div的博客

10-25

3288

el-dialog的内容不刷新；el-dialog内容有缓存；el-dialog里面的组件不刷新问题；

dialog里面数据更新问题

weixin_34354945的博客

01-08

2620

在实际开发中经常会用到showDialog（int id）的方法来展示一个对话框，但是会遇到一个Dialog展示之后下次再show的时候对话框的界面还是上次展示的那个，而不是我们想象的界面。很多时候我们打开一个对话框的时候里面的元素是根据需求变化的，这个时候就遇到刷新对话框的问题。这个时候就需要用到重写onPrepareDialog方法了现在有两方面需求：1、对话框的title或者message，...

解决el-input视图不更新的问题！！！

zly_101的博客

07-01

5236

上图中的数据列表为：this.makeCardDData.list this.makeCardDData.list = [{amountTit: “50元面值”, count: 0}, {amountTit: “100元面值”, count: 0}, {amountTit: “200元面值”, count: 0}, {amountTit: “500元面值”, count: 0}, {amount...

element-ui中dialog弹窗关闭按钮失效的解决

10-14

在使用element-ui的el-dialog组件时，有时可能会遇到关闭按钮失效的问题。这个问题可能是由于多种原因导致的，比如数据绑定或者事件监听设置不当等。在element-ui中，Dialog组件的使用是相对直观的，但有时在复杂的...

vue-element-utils:对 element-ui 的一些组件做的拓展自定义指令工具

08-05

v-dialog-drag: Dialog 组件拖拽任意位置 v-dialog-drag-width: Dialog 组件拖拽宽度 v-dialog-corner: Dialog 组件右下角拖拽宽度高度 v-clipboard: 剪切板指令，类似复制、Ctrl + C等复制文本至剪切板提供原型...

基于element-ui对话框el-dialog初始化的校验问题解决

10-14

`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当对话框在不刷新页面的情况下被多次打开，可能会遇到自动校验的问题，即使用户没有主动触发校验。这个...

实现组件可多拽功能：Vue + Element-ui Dialog

10-25

在本文中，我们将深入探讨如何使用Vue.js框架与Element-ui库来实现一个具有拖放功能的Dialog组件。Element-ui是一个流行的UI组件库，为Vue.js提供了丰富的预设组件，包括Dialog对话框。Vue.js的自定义指令机制允许...

解决vue使用el-dialog中组件只有第一次执行mounted方法的问题(编辑成功后, 数据列表不刷新最新数据,只能刷新页面才能正常使用)

一方湖泊

12-08

3115

问题描述打开编辑页面或模态框(Edit.vue), 编辑完成后, 数据修改成功, 跳转到列表页(Index.vue)后, 不刷新最新的数据, 只能刷新页面才能正常使用. 原因 vue使用el-dialog中组件,第二次打开没有执行组件内mounted的初始化方法，只能刷新页面才能正常使用解决方法 editDialog是控制打开el-dialog弹窗的标志 data() { return { formFields: .

关于Vue Dialog弹框中使用数据不刷新问题解决

QueenLee1的博客

08-18

4374

做vue项目的坑一直很多,有的是element-ui组件自带坑,有的是vue机制问题,但是除了各种坑以外,对vue还是很喜爱的. 其实也很简单,在弹框关闭时,清空数据,就可以解决

和el-dialog同级的列表被push数据后for循环渲染失效，列表不更新

weixin_45714898的博客

09-08

658

和el-dialog同级的列表被push数据后for循环渲染失效，列表不更新

dialog 内组件数据刷新延迟

xfWgaoqiang的博客

12-28

546

<el-dialog :destroy-on-close="true" top="5vh" width="80%" title="流程图操作工具：鼠标右键" :visible.sync="dialogTableVisible"> <flow-chart :dialogNodes="dialogNodes" :key="timer1"></flow-chart> </el-dialog> 组件上添加 :key="timer1" .

el-dialog数据延迟变化解决

Lalo的博客

03-29

1634

原代码如下： <el-dialog :title="descPro.projectType.project_type_content" :visible.sync="proDetailDialogVisible" width="50%" > </el-dialog> descPro: { projectType: {}, } proDetailDialogVisible: false, //通过点击事件来触发对话框 proDetail(project_id) { thi.

vue 父子组件传值_VUE后台，整合elementUI、Router、Vuex组件传值【更新角色模块】...

weixin_39523529的博客

12-12

更新！！！更新角色基础模块的管理。持续更新中，会逐步将后台模块的代码也共享。后台的基础数据：springboot+springmvc+mybatis+freemarker代码生成器+quartz自定义定时器等！！！2020年4月23日更新！！！实现VUE后台项目脚手架，整合了Router路由、Vuex状态管理、axios服务请求、elementUI、组件布局、子父组件传值、父子组件传值、兄弟组件传...

el-table数据不更新/父组件dialog无法关闭处理

qq_36566924的博客

07-19

357

情景:1.在el-table里面调用，当数据更新后，expand里面的数据没更新解决:el-table加上标签:key=“tableKey” 在请求完数据后 this.tableKey=Math.random() 情景2.有时候在子组件里面封装了el-dialog，当父组件点击关闭的时候，只将子组件的dialogVisible设置为了false，而父组件没有设置。解决 :visible.sync=“visible” visible=Math.random() ...

el-table中的el-input标签修改值，但界面未更新，解决方法