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