淺談vue中resetFields()使用注意事項(xiàng)
this.$refs.frmAdd.resetFields();這句在使用中有些時(shí)候不會(huì)有啥問題，但有時(shí)候就會(huì)出問題，而且特別難纏，我原來這么使用就沒問題啊，怎么這里就會(huì)有問題，查找各種資料總結(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)備開始彈出彈框時(shí)的方法中
補(bǔ)充知識(shí)：vue-element-ui 中 form resetFields并沒有清空表單
問題背景
vue-element-ui 中 form中有個(gè)清空表單的方法，即假如給表單一個(gè)ref='form', 則清空表單的方法為this.$refs['form'].resetFields()
可當(dāng)我在dialog組件中用這個(gè)方法的時(shí)候，這就出現(xià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)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue如何判斷組件進(jìn)入可視區(qū)域問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章大家分享了vue中axios的封裝的相關(guān)知識(shí)點(diǎn)以及實(shí)例代碼，有興趣的朋友參考學(xué)習(xí)下。2018-07-07
這篇文章主要介紹了vue如何重置data、組件中的data為什么是一個(gè)函數(shù)、為什么new Vue里的data可以是一個(gè)對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
如何使用 vxe-table 實(shí)現(xiàn)左邊是樹右邊是表格聯(lián)動(dòng)功能
使用 vxe-table 來實(shí)現(xiàn)左邊是樹,右邊是表格聯(lián)動(dòng)功能,當(dāng)需要實(shí)現(xiàn)左右兩側(cè)聯(lián)動(dòng)時(shí),表格 vxe-grid 配合分割模板 vxe-split 就很容易實(shí)現(xiàn)了,下面通過實(shí)例代碼給大家介紹使用 vxe-table 來實(shí)現(xiàn)左邊是樹,右邊是表格聯(lián)動(dòng)功能,感興趣的朋友一起看看吧2025-03-03
文章介紹了在網(wǎng)頁中使用Vue.js的四種方式：基本方式、腳手架方式（Vue2.0）、使用WebStorm集成環(huán)境創(chuàng)建vue-cli項(xiàng)目（Vue3.0）以及Vue項(xiàng)目的目錄結(jié)構(gòu),每種方式都有詳細(xì)的步驟和示例,幫助讀者快速上手Vue.js開發(fā)2024-11-11
這篇文章主要為大家介紹了Vue2中的組件通信方式，文中通過示例進(jìn)行了詳細(xì)的介紹，對(duì)我們學(xué)習(xí)Vue有一定的幫助，感興趣的小伙伴可以了解一下2022-07-07
這篇文章主要介紹了在Vue 中獲取下拉框的文本及選項(xiàng)值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue3?element-plus實(shí)現(xiàn)圖片預(yù)覽功能實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3?element-plus實(shí)現(xiàn)圖片預(yù)覽功能的相關(guān)資料,在項(xiàng)目中我們經(jīng)常會(huì)碰到圖片預(yù)覽的功能需求,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
vue中的data,computed,methods,created,mounted用法及說明
這篇文章主要介紹了vue中的data,computed,methods,created,mounted用法及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue2路由動(dòng)畫效果的實(shí)現(xiàn)代碼
本篇文章主要介紹了Vue2路由動(dòng)畫效果的實(shí)現(xiàn)代碼，可以根據(jù)不同的路徑去改變動(dòng)畫的效果，有興趣的可以了解一下2017-07-07