vue中使用resetFields()注意事項(xiàng)有哪些

小編給大家分享一下vue中使用resetFields()注意事項(xiàng)有哪些，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

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í)候

第二種情況：放在彈框關(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)備開(kāi)始彈出彈框時(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í)，第一次打開(kāi)dialog的時(shí)候給表單綁定的form賦值了，這時(shí)候這個(gè)form的初始值就變成了你所賦值的值，所以resetFields的時(shí)候，會(huì)將form對(duì)應(yīng)的每個(gè)值重置到初始值，這時(shí)候的初始值就是你編輯時(shí)賦值的那個(gè)值, 而不是在data里聲明的初始值，

如表單綁定的值為：

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

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

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

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

解決

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

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

看完了這篇文章，相信你對(duì)vue中使用resetFields()注意事項(xiàng)有哪些有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！