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