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 相关文章推荐
Windows Live的@live.com域名注册漏洞 利用代码
Dec 27 Javascript
ECMAScript 基础知识
Jun 29 Javascript
document.getElementById介绍
Sep 13 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 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
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
JavaScript 事件系统
2010/07/22 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
如何通过javaScript去除字符串两端的空白字符
2020/02/06 Javascript
调试Python程序代码的几种方法总结
2015/04/28 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
python SocketServer源码深入解读
2019/09/17 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
婚礼主持结束词
2014/03/13 职场文书
法律专业求职信
2014/05/24 职场文书
工人先锋号申报材料
2014/12/29 职场文书
会议室管理制度范本
2015/08/06 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
话题作文之诚信
2019/11/28 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
CSS 左边固定宽右边自适应的6种方法
2022/05/15 HTML / CSS