【辰兮要努力】：hello你好我是辰兮，很高興你能來閱讀，昵稱是希望自己能不斷精進，向著優秀程式員前行！
博客來源于專案以及編程中遇到的問題總結，偶爾會有讀書分享，我會陸續更新Java前端、后臺、資料庫、專案案例等相關知識點總結，感謝你的閱讀和關注，希望我的博客能幫助到更多的人，分享獲取新知，大家一起進步!
吾等采石之人，應懷大教堂之心，愿你們奔赴在各自的熱愛中…
文章目錄
- 一、業務場景
- 二、拓展補充
一、業務場景
業務場景：最近Vue+ElementUI專案，遇到彈框清空表單報錯，自己在做表單校驗的時候，打開彈框的時候清空表單出現如下報錯；TypeError: Cannot read property ‘resetFields‘ of undefined
//報錯方法
this.$refs[formName].resetFields();
resetField：對該表單項進行重置，將其值重置為初始值并移除校驗結果
報錯原因：
mouted加載table資料以后，隱藏的 Dialog 并沒有編譯渲染進 dom 里面，
所以當通過點擊事件，Dialog 彈出的時候，$refs 并沒有獲取到 dom 元素導致 ‘resetFields’ of undefined
解決方案一：使用 $nextTick，保證 dom 已經渲染成功
resetForm(formName) {
this.$nextTick(()=>{
this.$refs[formName].resetFields();
})
},
this.$nextTick 將回呼延遲到下次DOM更新回圈之后執行，
上述報錯原因就是因為dom元素沒有渲染完成就執行了方法，導致找不到報錯；執行此方法即解決這個問題；
相關知識點參考：this.$nextTick 的實體案例講解
注意事項：對DOM一系列的js操做最好都要放進Vue.nextTick()的回呼函式中
解決方案二：如果是第一次點擊沒必要重置，判斷一下undefined即可；
備注：大家可以自己嘗試一下，關于此類報錯可能第一次打開報錯（物件沒生成導致報錯），后續就不再報錯了，如果一直報錯就嘗試方案一解決方法
resetForm(formName)
{
if (this.$refs[formName]!==undefined) {
this.$refs[formName].resetFields();
}
}
二、拓展補充
補充講解resetFields和clearValidate
resetFields情況校驗，且重置欄位值
clearValidate僅僅移除校驗結果
相對來說resetFields功能更加強大一些，放一個圖大家更直觀的了解校驗和欄位值
this.$refs.form.resetFields(); //移除校驗結果并重置欄位值
this.$refs.form.clearValidate(); //移除校驗結果
最近一段時間會陸續整理前端相關的基礎知識，分享給初學者，愿共同進步，感興趣的可以參考：JavaScript前端專欄
非常感謝你閱讀到這里，如果這篇文章對你有幫助，希望能留下你的點贊👍 關注?? 分享👥 留言💬thanks！！！
2021年4月10日20:54:08 愿你們奔赴在自己的熱愛里！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/275020.html
標籤：其他
上一篇：HTML基礎介紹