淺談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; })
以上這篇淺談vue中resetFields()使用注意事項(xiàng)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue響應(yīng)式系統(tǒng)之observe、watcher、dep的源碼解析
這篇文章主要介紹了vue響應(yīng)式系統(tǒng)之observe、watcher、dep的源碼解析,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04el-tree懶加載的實(shí)現(xiàn)以及局部刷新方式
這篇文章主要介紹了el-tree懶加載的實(shí)現(xiàn)以及局部刷新方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04el-table-column疊加el-popover使用示例小結(jié)
el-table-column有一列展示多個(gè)tag信息,實(shí)現(xiàn)點(diǎn)擊tag展示tag信息以及tag對(duì)應(yīng)的詳細(xì)信息,本文通過(guò)示例代碼介紹el-table-column疊加el-popover使用示例小結(jié),感興趣的朋友跟隨小編一起看看吧2024-04-04vue+echarts定時(shí)重新繪制以達(dá)到刷新的動(dòng)效問(wèn)題
這篇文章主要介紹了vue+echarts定時(shí)重新繪制以達(dá)到刷新的動(dòng)效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06關(guān)于vue.js中實(shí)現(xiàn)方法內(nèi)某些代碼延時(shí)執(zhí)行
今天小編就為大家分享一篇關(guān)于vue.js中實(shí)現(xiàn)方法內(nèi)某些代碼延時(shí)執(zhí)行,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11Vue中判斷語(yǔ)句與循環(huán)語(yǔ)句基礎(chǔ)用法及v-if和v-for的注意事項(xiàng)詳解
在Vue指令中,最經(jīng)常被用于做邏輯操作的指令,下面這篇文章主要給大家介紹了關(guān)于Vue中判斷語(yǔ)句與循環(huán)語(yǔ)句基礎(chǔ)用法及v-if和v-for注意事項(xiàng)的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08前端H5微信支付寶支付實(shí)現(xiàn)方法(uniapp為例)
最近上線一個(gè)項(xiàng)目,手機(jī)網(wǎng)站進(jìn)行調(diào)起支付寶App支付,做起來(lái)還是滿順手的,在此做個(gè)記錄,這篇文章主要給大家介紹了關(guān)于前端H5微信支付寶支付實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2024-04-04解決vue 打包發(fā)布去#和頁(yè)面空白的問(wèn)題
今天小編就為大家分享一篇解決vue 打包發(fā)布去#和頁(yè)面空白的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09