Vue中关闭弹窗组件时销毁并隐藏操作


Posted in Javascript onSeptember 01, 2020

背景:在dialog弹窗组件中执行mounted钩子,将数据初始化,等取消关闭弹窗后,发现mounted钩子不执行

原因:在vue的生命周期中,在页面初始化的时候mounted只会执行一次,关闭弹窗页面并没有销毁,所以不会再次执行

<select-experience-group 
:trialMoneyRecordID=trialMoneyRecordID 
:showExperienceGroup='showExperienceGroup' 
@closeCover="handleExperienceGroup">
</select-experience-group>

解决办法:就是隐藏dialog的时候要销毁这个dialog。给dialog加v-if,在关闭dialog的时候将v-if设置为false这样会直接将其从DOM结构中抹除,到此问题解决。

修改后代码:

<select-experience-group 
:trialMoneyRecordID=trialMoneyRecordID 
:showExperienceGroup='showExperienceGroup' 
v-if="showExperienceGroup" //利用v-if对页面进行销毁
@closeCover="handleExperienceGroup">
</select-experience-group>

补充知识:vue element-ui Dialog对话框关闭后重新打开数据不清空

重置表单的方法

this.$refs[formRef].resetFields();

不是表单中的数据,也需要重置

this.$data = this.$options.data();

以上这篇Vue中关闭弹窗组件时销毁并隐藏操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
认识延迟时间为0的setTimeout
May 16 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
react的hooks的用法详解
Oct 12 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 #Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 #Javascript
jQuery实现动态加载瀑布流
Sep 01 #jQuery
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 #Javascript
vue treeselect获取当前选中项的label实例
Aug 31 #Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 #Javascript
搭建vscode+vue环境的详细教程
Aug 31 #Javascript
You might like
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
2017/12/24 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
用Python实现随机森林算法的示例
2017/08/24 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
人民调解协议书范本
2014/10/11 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
Python基础之函数嵌套知识总结
2021/05/23 Python
Python多个MP4合成视频的实现方法
2021/07/16 Python
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏