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基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
Express URL跳转(重定向)的实现方法
Apr 07 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
javascript实现简单打字游戏
Oct 29 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 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分页原理 分页代码 分页类制作教程
2016/09/23 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
js用图作提交按钮或超连接
2008/03/26 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
Python标准库之Sys模块使用详解
2015/05/23 Python
python的mysqldb安装步骤详解
2017/08/14 Python
python监控进程脚本
2018/04/12 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
pandas 对group进行聚合的例子
2019/12/27 Python
Python中如何添加自定义模块
2020/06/09 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
Python ellipsis 的用法详解
2020/11/20 Python
应届生.NET方向面试题
2015/05/23 面试题
二年级语文教学反思
2014/02/02 职场文书
暑期培训随笔感言
2014/03/10 职场文书
水电站项目建议书
2014/05/12 职场文书
公司口号大全
2014/06/11 职场文书
给老婆的道歉信
2015/01/20 职场文书
企业年会祝酒词
2015/08/11 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python