vue中resetFields()不生效

this.$refs.frmAdd.resetFields();這句在使用中有些時(shí)候不會(huì)有啥問(wèn)題,但有時(shí)候就會(huì)出問(wèn)題,而且特別難纏,我原來(lái)這么使用就沒(méi)問(wèn)題啊,怎么這里就會(huì)有問(wèn)題,查找各種資料總結(jié)得出:

第一種情況:放在彈框剛準(zhǔn)備彈出的時(shí)候


image.png

第二種情況:放在彈框關(guān)閉方法@close中

發(fā)現(xiàn)上次報(bào)紅框的地方仍然在,并未重置

最終解決方案:

this.KaTeX parse error: Expected "}", got "EOF" at end of input: … this.refs.frmAdd.resetFields(); });

可以放在準(zhǔn)備開始彈出彈框時(shí)的方法中

補(bǔ)充知識(shí):vue-element-ui 中 form resetFields并沒(méi)有清空表單

問(wèn)題背景

vue-element-ui 中 form中有個(gè)清空表單的方法,即假如給表單一個(gè)ref="form", 則清空表單的方法為this.$refs["form"].resetFields()

可當(dāng)我在dialog組件中用這個(gè)方法的時(shí)候,這就出現(xiàn)問(wèn)題了,居然清空不了~~~~~

問(wèn)題所在

問(wèn)題的本質(zhì)是因?yàn)槟憔庉嫊r(shí),第一次打開dialog的時(shí)候給表單綁定的form賦值了,這時(shí)候這個(gè)form的初始值就變成了你所賦值的值,所以resetFields的時(shí)候,會(huì)將form對(duì)應(yīng)的每個(gè)值重置到初始值,這時(shí)候的初始值就是你編輯時(shí)賦值的那個(gè)值, 而不是在data里聲明的初始值,

如表單綁定的值為:

form: {
 age: 0,
 name: ""
}

但在你打開dialog編輯的時(shí)候,你又對(duì)它進(jìn)行賦值,如

this.form = {
 age:23,
 name:"lala"
}

這個(gè)時(shí)候form表單會(huì)默認(rèn)這個(gè)新賦的值為初始值

解決

解決方式是,等dialog已經(jīng)初始化之后再給form賦值,也就是

this.$nextTick(() => { // 這里開始賦值 this.form.xxx = xxx; })

以上這篇淺談vue中resetFields()使用注意事項(xiàng)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持云海天教程。

原文鏈接:https://blog.csdn.net/weixin_41796860/article/details/85162723
https://www.yht7.com/news/112324

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容