Vue中關(guān)閉彈窗組件時(shí)銷毀并隱藏操作
背景:在dialog彈窗組件中執(zhí)行mounted鉤子,將數(shù)據(jù)初始化,等取消關(guān)閉彈窗后,發(fā)現(xiàn)mounted鉤子不執(zhí)行
原因:在vue的生命周期中,在頁(yè)面初始化的時(shí)候mounted只會(huì)執(zhí)行一次,關(guān)閉彈窗頁(yè)面并沒有銷毀,所以不會(huì)再次執(zhí)行
<select-experience-group :trialMoneyRecordID=trialMoneyRecordID :showExperienceGroup=’showExperienceGroup’ @closeCover='handleExperienceGroup'></select-experience-group>
解決辦法:就是隱藏dialog的時(shí)候要銷毀這個(gè)dialog。給dialog加v-if,在關(guān)閉dialog的時(shí)候?qū)-if設(shè)置為false這樣會(huì)直接將其從DOM結(jié)構(gòu)中抹除,到此問題解決。
修改后代碼:
<select-experience-group :trialMoneyRecordID=trialMoneyRecordID :showExperienceGroup=’showExperienceGroup’ v-if='showExperienceGroup' //利用v-if對(duì)頁(yè)面進(jìn)行銷毀@closeCover='handleExperienceGroup'></select-experience-group>
補(bǔ)充知識(shí):vue element-ui Dialog對(duì)話框關(guān)閉后重新打開數(shù)據(jù)不清空
重置表單的方法
this.$refs[formRef].resetFields();
不是表單中的數(shù)據(jù),也需要重置
this.$data = this.$options.data();
以上這篇Vue中關(guān)閉彈窗組件時(shí)銷毀并隱藏操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. IDEA 2020.1.2 安裝教程附破解教程詳解2. Java利用TCP協(xié)議實(shí)現(xiàn)客戶端與服務(wù)器通信(附通信源碼)3. 40個(gè)Java集合面試問題和答案4. Spring如何集成ibatis項(xiàng)目并實(shí)現(xiàn)dao層基類封裝5. django queryset相加和篩選教程6. idea設(shè)置提示不區(qū)分大小寫的方法7. IntelliJ IDEA導(dǎo)出項(xiàng)目的方法8. ajax實(shí)現(xiàn)頁(yè)面的局部加載9. 使用AJAX(包含正則表達(dá)式)驗(yàn)證用戶登錄的步驟10. JS圖片懶加載庫(kù)VueLazyLoad詳解

網(wǎng)公網(wǎng)安備