淺談vue中resetFields()使用注意事項(resetFields無效)


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

第一種情況:放在彈框剛准備彈出的時候

第二種情況:放在彈框關閉方法@close中

發現上次報紅框的地方仍然在,並未重置

最終解決方案:

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

可以放在准備開始彈出彈框時的方法中

補充知識:vue-element-ui 中 form resetFields並沒有清空表單

問題背景

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

可當我在dialog組件中用這個方法的時候,這就出現問題了,居然清空不了~~~~~

問題所在

問題的本質是因為你編輯時,第一次打開dialog的時候給表單綁定的form賦值了,這時候這個form的初始值就變成了你所賦值的值,所以resetFields的時候,會將form對應的每個值重置到初始值,這時候的初始值就是你編輯時賦值的那個值, 而不是在data里聲明的初始值,

如表單綁定的值為:

1
2
3
4
form: {
  age: 0,
  name: ''
}

但在你打開dialog編輯的時候,你又對它進行賦值,如

1
2
3
4
this .form = {
  age:23,
  name: "lala"
}

這個時候form表單會默認這個新賦的值為初始值

解決

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

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

以上這篇淺談vue中resetFields()使用注意事項就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM