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