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é)果點擊界面還是沒反應(yīng)，最后去官網(wǎng)看了下，發(fā)現(xiàn)我沒有在表單的el-form-item寫prop屬性。
最后加上后，在點擊添加按鈕時候調(diào)用reset方法就可以了 。
但是在使用的時候要先設(shè)置打開model的變量為true之后再調(diào)用，因為只有設(shè)置為true后才能找到對應(yīng)的dom元素。 而且還是要使用nextTick的
resetFields失效,死活不起作用的解決
由于新增、編輯、查看彈框表單用的同一個表單，但打開編輯或查看表單并關(guān)閉后，再打開新增表單，發(fā)現(xiàn)表單有之前的數(shù)據(jù)，resetFields失效。
分析
后查看官方文檔，發(fā)現(xiàn)，resetFields只是對整個表單進行重置，將所有字段重置為初始值并移除校驗結(jié)果，當(dāng)打開編輯表單后，表單字段初始值就為編輯獲取到的值，此時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變量要一一對應(yīng)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
淺談VueUse中useAsyncState的實現(xiàn)原理
useAsyncState?是 VueUse 庫中提供的一個實用工具,它用于處理異步狀態(tài),本文主要介紹了VueUse中useAsyncState的實現(xiàn)及其原理,具有一定的參考價值,感興趣的可以了解一下2024-08-08
vue + element-ui實現(xiàn)簡潔的導(dǎo)入導(dǎo)出功能
Element-UI是餓了么前端團隊推出的一款基于Vue.js 2.0 的桌面端UI框架,手機端有對應(yīng)框架是 Mint UI，下面這篇文章主要給大家介紹了關(guān)于利用vue + element-ui如何實現(xiàn)簡潔的導(dǎo)入導(dǎo)出功能的相關(guān)資料，需要的朋友可以參考下。2017-12-12
這篇文章主要介紹了詳解Vue項目部署遇到的問題及解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要為大家介紹了React DOM diff 對比Vue DOM diff 區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
本篇文章主要介紹了Vue 開發(fā)模式下跨域問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要介紹了解決vuex刷新數(shù)據(jù)消失問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vant IndexBar實現(xiàn)的城市列表的示例代碼
這篇文章主要介紹了vant IndexBar實現(xiàn)的城市列表的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家介紹了Vue之TodoList的案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-11-11
今天小編就為大家分享一篇Vue最新防抖方案(必看篇)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue-cli Eslint在vscode里代碼自動格式化的方法
本篇文章主要介紹了Vue-cli Eslint在vscode里代碼自動格式化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02