基于element-ui對話框el-dialog初始化的校驗問題解決
不刷新頁面重新打開el-dialog時，如果我們綁定了rules或者某個值需要required，它總會自動校驗。
查看了多個博文，發(fā)現(xiàn)常用的有兩種解決方法(下列方法都可以在其他博文查看，不再細寫，如有需要請自行查詢)：
1.給dialog套上v-if ；
2.在關(guān)閉dialog時,監(jiān)聽關(guān)閉回調(diào),清除校驗。
我在自己的項目里使用了上述兩種方法，都不太好用，自己琢磨出了另一種方法：
<el-dialog @open="openDialog()">
</el-dialog>
調(diào)用dialog打開的回調(diào)
methods:
openDialog(){
this.$nextTick(() => {
this.$refs.dataForm.clearValidate();
})
}
初始化dialog時, 拿到變化后的dom, 進行清除校驗
補充知識：Cannot read property 'resetFields' of undefined 問題及引申
問題描述： 使用element開發(fā)我的后臺系統(tǒng)，編輯和新增使用了同一個彈出框<el-dialog><el-form></el-form></el-dialog>
綁定了數(shù)據(jù)data里的commentForm對象
為了在新增彈出框清空表單, 使用了this.$refs[formName].resetFields()
每次第一次點擊新增顯示彈出框，都會報錯
"[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined""
問題原因：
mouted加載table數(shù)據(jù)以后，隱藏的彈出框并沒有編譯渲染進dom里面。
所以@click="dialogFormVisible = true;resetForm('dlgForm')"click彈出的時候$refs并沒有獲取到dom元素導致 'resetFields' of undefined
解決方法：
1、($nextTick dom下一次更新之后)
resetForm(formName) {
this.$nextTick(()=>{
this.$refs[formName].resetFields();
})
},
2、(如果是第一次就點擊新增就沒必要reset, 根據(jù)元素undefined判斷)
if (this.$refs[formName] !== undefined) {
this.$refs[formName].resetFields();
}
注意事項：對DOM一系列的js操作最好都要放進Vue.nextTick()的回調(diào)函數(shù)中
以上這篇基于element-ui對話框el-dialog初始化的校驗問題解決就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue+swiper實現(xiàn)側(cè)滑菜單效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
前端請求超時截斷axios?timeout設(shè)置未生效情況解決記錄
在項目中遇到了后臺接口返回數(shù)據(jù)慢的時候往往需要設(shè)置請求失效時間,在項目中遇到設(shè)置timeout失效問題由此記錄下來,這篇文章主要給大家介紹了前端請求超時截斷axios?timeout設(shè)置未生效情況解決的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue 同步異步存值取值實現(xiàn)案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了最新vue-cli 2.9.1的webpack存在問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了如何使用Vue技術(shù)實現(xiàn)一個簡單的備忘錄應用,包括添加條目和拖拽條目兩個功能,文章還詳細解釋了如何使用Vue的draggable屬性和JavaScript獲取同級元素節(jié)點的方法,需要的朋友可以參考下2025-01-01
今天小編就為大家分享一篇vue prop屬性傳值與傳引用示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue3+TS 實現(xiàn)自定義指令長按觸發(fā)綁定的函數(shù)
這篇文章主要介紹了vue3+TS實現(xiàn)自定義指令長按觸發(fā)綁定的函數(shù),文中給大家分享了編寫自定義指令時遇到的幾個難點，本文結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-12-12
關(guān)于Vue新搭檔TypeScript快速入門實踐
這篇文章主要介紹了關(guān)于Vue新搭檔TypeScript快速入門實踐，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
element表格翻頁第2頁從1開始編號(后端從0開始分頁)
這篇文章主要介紹了element表格翻頁第2頁從1開始編號(后端從0開始分頁)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
下面小編就為大家?guī)硪黄猧view給radio按鈕組件加點擊事件的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09