vue form表單使用resetFields函數(shù)出現(xiàn)的問題

更新時間：2022年05月27日 10:09:30 作者：長成一棵參天樹

這篇文章主要介紹了vue form表單使用resetFields函數(shù)出現(xiàn)的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

form表單使用resetFields函數(shù)的問題

今天想使用新增和刪除使用一個dialog，這就涉及到點擊添加按鈕需要清空表單數(shù)據(jù)的問題，我第一個想到的是調(diào)用resetFields方法。

我直接寫了之后是這樣的

this.$refs[formName].resetFields()

結(jié)果直接報錯，于是我就上網(wǎng)上百度了后，發(fā)現(xiàn)改成這樣就不報錯了。

 this.$nextTick(function() {
   const el: any = this.$refs[formName];
   el.resetFields(); 
});

于是心想肯定可以了，結(jié)果點擊界面還是沒反應，最后去官網(wǎng)看了下，發(fā)現(xiàn)我沒有在表單的el-form-item寫prop屬性。

最后加上后，在點擊添加按鈕時候調(diào)用reset方法就可以了。

但是在使用的時候要先設置打開model的變量為true之后再調(diào)用，因為只有設置為true后才能找到對應的dom元素。而且還是要使用nextTick的

resetFields失效,死活不起作用的解決

由于新增、編輯、查看彈框表單用的同一個表單，但打開編輯或查看表單并關(guān)閉后，再打開新增表單，發(fā)現(xiàn)表單有之前的數(shù)據(jù)，resetFields失效。

分析

后查看官方文檔，發(fā)現(xiàn)，resetFields只是對整個表單進行重置，將所有字段重置為初始值并移除校驗結(jié)果，當打開編輯表單后，表單字段初始值就為編輯獲取到的值，此時resetFields就是將表單字段重置為初始值，就是編輯表單獲取到的值；

解決辦法

eg：

vue
<el-dialog @close=“handleClose(‘userForm')”>
<el-input v-model="userForm.name>
…

…
表單 userForm = {
name: “”,
age: “”,
}

關(guān)閉彈框方法里寫：

handleClose(formName) {
let resetForm = {
name: “”,
age: “”,
}
this[formName] = resetForm;//清空表單
this.$refs[formName]
.resetFields();//移除校驗結(jié)果
。。。。再寫關(guān)閉彈框等其他方法。。。
}

PS：表單中prop與v-model變量要一一對應

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

淺談VueUse中useAsyncState的實現(xiàn)原理
useAsyncState?是 VueUse 庫中提供的一個實用工具,它用于處理異步狀態(tài),本文主要介紹了VueUse中useAsyncState的實現(xiàn)及其原理,具有一定的參考價值,感興趣的可以了解一下
2024-08-08
vue + element-ui實現(xiàn)簡潔的導入導出功能
Element-UI是餓了么前端團隊推出的一款基于Vue.js 2.0 的桌面端UI框架,手機端有對應框架是 Mint UI，下面這篇文章主要給大家介紹了關(guān)于利用vue + element-ui如何實現(xiàn)簡潔的導入導出功能的相關(guān)資料，需要的朋友可以參考下。
2017-12-12
詳解Vue項目部署遇到的問題及解決方案
這篇文章主要介紹了詳解Vue項目部署遇到的問題及解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-01-01
React DOM diff 對比Vue DOM diff
這篇文章主要為大家介紹了React DOM diff 對比Vue DOM diff 區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
詳解Vue 開發(fā)模式下跨域問題
本篇文章主要介紹了Vue 開發(fā)模式下跨域問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
解決vuex刷新數(shù)據(jù)消失問題
這篇文章主要介紹了解決vuex刷新數(shù)據(jù)消失問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vant IndexBar實現(xiàn)的城市列表的示例代碼
這篇文章主要介紹了vant IndexBar實現(xiàn)的城市列表的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-11-11
Vue之TodoList案例詳解
這篇文章主要為大家介紹了Vue之TodoList的案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>
2021-11-11
Vue最新防抖方案(必看篇)
今天小編就為大家分享一篇Vue最新防抖方案(必看篇)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
Vue-cli Eslint在vscode里代碼自動格式化的方法
本篇文章主要介紹了Vue-cli Eslint在vscode里代碼自動格式化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02