淺談vue中resetFields()使用注意事項(xiàng)
this.$refs.frmAdd.resetFields();這句在使用中有些時候不會有啥問題,但有時候就會出問題,而且特別難纏,我原來這么使用就沒問題啊,怎么這里就會有問題,查找各種資料總結(jié)得出:
第一種情況:放在彈框剛準(zhǔn)備彈出的時候
第二種情況:放在彈框關(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)備開始彈出彈框時的方法中
補(bǔ)充知識:vue-element-ui 中 form resetFields并沒有清空表單
問題背景
vue-element-ui 中 form中有個清空表單的方法,即假如給表單一個ref=’form’, 則清空表單的方法為this.$refs[’form’].resetFields()
可當(dāng)我在dialog組件中用這個方法的時候,這就出現(xiàn)問題了,居然清空不了~~~~~
問題所在
問題的本質(zhì)是因?yàn)槟憔庉嫊r,第一次打開dialog的時候給表單綁定的form賦值了,這時候這個form的初始值就變成了你所賦值的值,所以resetFields的時候,會將form對應(yīng)的每個值重置到初始值,這時候的初始值就是你編輯時賦值的那個值, 而不是在data里聲明的初始值,
如表單綁定的值為:
form: { age: 0, name: ’’}
但在你打開dialog編輯的時候,你又對它進(jìn)行賦值,如
this.form = { age:23, name:'lala'}
這個時候form表單會默認(rèn)這個新賦的值為初始值
解決
解決方式是,等dialog已經(jīng)初始化之后再給form賦值,也就是
this.$nextTick(() => { // 這里開始賦值 this.form.xxx = xxx; })
以上這篇淺談vue中resetFields()使用注意事項(xiàng)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. Python網(wǎng)絡(luò)編程之ZeroMQ知識總結(jié)2. chat.asp聊天程序的編寫方法3. Python TestSuite生成測試報(bào)告過程解析4. .NET 中配置從xml轉(zhuǎn)向json方法示例詳解5. 深入了解JAVA 軟引用6. python之cur.fetchall與cur.fetchone提取數(shù)據(jù)并統(tǒng)計(jì)處理操作7. python實(shí)現(xiàn)讀取類別頻數(shù)數(shù)據(jù)畫水平條形圖案例8. 解決AJAX返回狀態(tài)200沒有調(diào)用success的問題9. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案10. JSP之表單提交get和post的區(qū)別詳解及實(shí)例
