關(guān)于element-ui resetFields重置方法無效問題及解決
更新時間：2022年08月12日 11:06:04 投稿：jingxian
這篇文章主要介紹了關(guān)于element-ui resetFields重置方法無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
element-ui resetFields重置方法無效
目前發(fā)現(xiàn)resetFields()，有以下兩種情況可能會導(dǎo)致失效：
情況1.el-form-item沒有加上prop屬性
需要重置的表單項el-form-item必須要加上prop屬性，并且prop屬性的值必須和數(shù)據(jù)雙向綁定的值最后面保持一致
element-ui 提供的文檔如圖：
圖例如下：
情況2.在mounted之前給表單賦值（mounted DOM未掛載完成）
在mounted之前賦值會被當(dāng)成是初始值，而resetFields方法是將值重置為初始值而不是清空。所以導(dǎo)致沒有清空數(shù)據(jù)。
解決辦法
法一：表單在mounted再賦值
法二：使用this.$nextTick(() => { // 這里開始賦值 this.form.xx = xx; })
element-ui表單重置函數(shù)resetFields();使用注意事項
在表單重置的時候我們習(xí)慣使用this.$refs[formName].resetFields();來重置表單，但有時候會出現(xiàn)重置不完全的情況，例如：
表單綁定的變量：
formData:{ id:null, name:null , age:null}表單html：
<el-form ref="form" :model="formData" label-width="80px" size="mini"> ? ?<el-form-item label="姓名"> <el-input v-model="formData.name"></el-input> </el-form-item> ? ?<el-form-item label="性別"> <el-input v-model="formData.age"></el-input> </el-form-item> </el-form>
當(dāng)我們在編輯的時候會從后臺返回數(shù)據(jù)回填formData（有id），
當(dāng)我們使用 this.$refs[‘form’].resetFields();重置表單的時候，不能把id重置成null（因為表單html中沒有引用id項，所以重置的時候不能把formData.id重置），如果要把id重置成null，這個時候就要手動重置formData.id
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項目實現(xiàn)m3u8流媒體播放詳細(xì)圖文教程
m3u8是一種常用的視頻流媒體格式,通常用于在Web上播放視頻,這篇文章主要給大家介紹了關(guān)于vue項目實現(xiàn)m3u8流媒體播放的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
這篇文章主要介紹了解讀vue頁面監(jiān)聽store值改變問題，具有很好的參考價值，希望對大家有所幫助。2022-10-10
Vue項目數(shù)據(jù)動態(tài)過濾實踐及實現(xiàn)思路
這篇文章主要介紹了Vue項目數(shù)據(jù)動態(tài)過濾實踐,，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細(xì)介紹了用Vue.js開發(fā)一個網(wǎng)頁時鐘，分為白天模式和夜晚模式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
Vue + Webpack + Vue-loader學(xué)習(xí)教程之功能介紹篇
這篇文章主要介紹了關(guān)于Vue + Webpack + Vue-loader功能介紹的相關(guān)資料，文中介紹的非常詳細(xì)，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要介紹了在vue項目中使用Swiper插件詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
最近的數(shù)據(jù)統(tǒng)計項目中要用到中國地圖，也就是在地圖上動態(tài)的顯示某個時間段某個省份地區(qū)的統(tǒng)計數(shù)據(jù)，我們不需要flash，僅僅依靠raphael.js以及SVG圖像就可以完成地圖的交互操作。本文就給大家介紹了關(guān)于利用vue集成raphael.js中國地圖的相關(guān)資料，需要的朋友可以參考下。2017-08-08
這篇文章主要為大家介紹了vue3容器布局和導(dǎo)航路由實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
Vue.js框架是什么，為什么要選擇它？這篇文章為大家介紹目前前端技術(shù)使用的趨勢，以及Vue.js的優(yōu)點和適用場景等，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
本篇文章主要介紹了詳解VueJs前后端分離跨域問題，詳細(xì)介紹了在項目內(nèi)設(shè)置代理（proxyTable）的方式來解決跨域問題，有興趣的可以了解一下2017-05-05