基于element-ui對(duì)話框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)自行查詢):
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ì)話框el-dialog初始化的校驗(yàn)問(wèn)題解決就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中component標(biāo)簽解決項(xiàng)目組件化操作
這篇文章主要介紹了Vue中component標(biāo)簽解決項(xiàng)目組件化操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09vue動(dòng)態(tài)添加表單validateField驗(yàn)證功能實(shí)現(xiàn)
這篇文章主要介紹了vue動(dòng)態(tài)添加表單validateField驗(yàn)證功能實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04Vue使用vue-cli創(chuàng)建項(xiàng)目
這篇文章主要介紹了Vue使用vue-cli創(chuàng)建項(xiàng)目,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09vue上傳文件formData入?yún)榭?接口請(qǐng)求500的解決
這篇文章主要介紹了vue上傳文件formData入?yún)榭?接口請(qǐng)求500的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06解決vue?app.js/vender.js過(guò)大優(yōu)化啟動(dòng)頁(yè)
這篇文章主要為大家介紹了解決vue?app.js/vender.js過(guò)大優(yōu)化啟動(dòng)頁(yè)過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10vue項(xiàng)目配置eslint保存自動(dòng)格式化問(wèn)題
這篇文章主要介紹了vue項(xiàng)目配置eslint保存自動(dòng)格式化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue與compressor.js實(shí)現(xiàn)高效文件壓縮的方法
本文將介紹基于 Vue 框架和 compressor.js 的上傳時(shí)文件壓縮實(shí)現(xiàn)方法,通過(guò)在上傳過(guò)程中對(duì)文件進(jìn)行壓縮,減小文件大小,提升上傳速度,為用戶創(chuàng)造更快捷、高效的上傳體驗(yàn),感興趣的朋友跟隨小編一起看看吧2024-03-03Vue通過(guò)WebSocket建立長(zhǎng)連接的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue通過(guò)WebSocket建立長(zhǎng)連接的實(shí)現(xiàn)代碼,文中給出了問(wèn)題及解決方案,需要的朋友可以參考下2019-11-11