vue form表單使用resetFields函數(shù)出現(xiàn)的問題
更新時間：2022年05月27日 10:09:30 作者：長成一棵參天樹
這篇文章主要介紹了vue form表單使用resetFields函數(shù)出現(xiàn)的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
form表單使用resetFields函數(shù)的問題
今天想使用新增和刪除使用一個dialog，這就涉及到點擊添加按鈕需要清空表單數(shù)據(jù)的問題，我第一個想到的是調用resetFields方法。
我直接寫了之后是這樣的
this.$refs[formName].resetFields()
結果直接報錯，于是我就上網(wǎng)上百度了后，發(fā)現(xiàn)改成這樣就不報錯了。
this.$nextTick(function() {
const el: any = this.$refs[formName];
el.resetFields();
});于是心想肯定可以了，結果點擊界面還是沒反應，最后去官網(wǎng)看了下，發(fā)現(xiàn)我沒有在表單的el-form-item寫prop屬性。
最后加上后，在點擊添加按鈕時候調用reset方法就可以了 。
但是在使用的時候要先設置打開model的變量為true之后再調用，因為只有設置為true后才能找到對應的dom元素。 而且還是要使用nextTick的
resetFields失效,死活不起作用的解決
由于新增、編輯、查看彈框表單用的同一個表單，但打開編輯或查看表單并關閉后，再打開新增表單，發(fā)現(xiàn)表單有之前的數(shù)據(jù)，resetFields失效。
分析
后查看官方文檔，發(fā)現(xiàn)，resetFields只是對整個表單進行重置，將所有字段重置為初始值并移除校驗結果，當打開編輯表單后，表單字段初始值就為編輯獲取到的值，此時resetFields就是將表單字段重置為初始值，就是編輯表單獲取到的值；
解決辦法
eg：
vue
<el-dialog @close=“handleClose(‘userForm')”>
<el-input v-model="userForm.name>
…
…
表單 userForm = {
name: “”,
age: “”,
}關閉彈框方法里寫：
handleClose(formName) {
let resetForm = {
name: “”,
age: “”,
}
this[formName] = resetForm;//清空表單
this.$refs[formName]
.resetFields();//移除校驗結果
。。。。再寫關閉彈框等其他方法。。。
}PS：表單中prop與v-model變量要一一對應
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue組件之 高德地圖地址選擇功能的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
基于vue與element實現(xiàn)創(chuàng)建試卷相關功能(實例代碼)
這篇文章主要介紹了基于vue與element實現(xiàn)創(chuàng)建試卷相關功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
記錄一下本地測試前端的時候怎么訪問本地后端接口,文中給大家提到了vue如何做調試后臺接口的配置和proxy的工作原理以及為什么能解決跨域，感興趣的朋友跟隨小編一起看看吧2023-06-06
這篇文章主要介紹了Vue用this.$set改變數(shù)組里的某個值,文中通過示例代碼介紹了vue中this.$set()的用法----更新數(shù)組和對象的值，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了Vue對話框組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細介紹了vue+elementUI面包屑組件封裝方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了如何使用Gitee Pages服務 搭建Vue項目，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue3+ElementPlus使用lang="ts"報Unexpected?token錯誤的解決
最近開發(fā)中遇到了些問題,跟大家分享下,這篇文章主要給大家介紹了關于vue3+ElementPlus使用lang="ts"報Unexpected?token錯誤的解決辦法,需要的朋友可以參考下2023-01-01
vue實現(xiàn)導出word文檔功能實例(含多張圖片)
項目需要導出word,于是乎又是查閱資料,然后自己寫,下面這篇文章主要給大家介紹了關于vue實現(xiàn)導出word文檔功能(含多張圖片)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue.js數(shù)據(jù)綁定操作,結合實例形式詳細分析了vue.js數(shù)據(jù)綁定的各種常見操作技巧與相關注意事項,需要的朋友可以參考下2018-04-04