關于element-ui resetFields重置方法無效問題及解決
更新時間：2022年08月12日 11:06:04 投稿：jingxian
這篇文章主要介紹了關于element-ui resetFields重置方法無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
element-ui resetFields重置方法無效
目前發(fā)現(xiàn)resetFields()，有以下兩種情況可能會導致失效：
情況1.el-form-item沒有加上prop屬性
需要重置的表單項el-form-item必須要加上prop屬性，并且prop屬性的值必須和數(shù)據(jù)雙向綁定的值最后面保持一致
element-ui 提供的文檔如圖：
圖例如下：
情況2.在mounted之前給表單賦值（mounted DOM未掛載完成）
在mounted之前賦值會被當成是初始值，而resetFields方法是將值重置為初始值而不是清空。所以導致沒有清空數(shù)據(jù)。
解決辦法
法一：表單在mounted再賦值
法二：使用this.$nextTick(() => { // 這里開始賦值 this.form.xx = xx; })
element-ui表單重置函數(shù)resetFields();使用注意事項
在表單重置的時候我們習慣使用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>
當我們在編輯的時候會從后臺返回數(shù)據(jù)回填formData（有id），
當我們使用 this.$refs[‘form’].resetFields();重置表單的時候，不能把id重置成null（因為表單html中沒有引用id項，所以重置的時候不能把formData.id重置），如果要把id重置成null，這個時候就要手動重置formData.id
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue2.0中三種常用傳值方式(父傳子、子傳父、非父子組件傳值)
在Vue的框架開發(fā)的項目過程中，經常會用到組件來管理不同的功能，有一些公共的組件會被提取出來。下面通過本文給大家介紹Vue開發(fā)中常用的三種傳值方式父傳子、子傳父、非父子組件傳值，需要的朋友參考下吧2018-08-08
這篇文章主要介紹了Vue如何實現(xiàn)打包資源按時間戳方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
vue中阻止click事件冒泡,防止觸發(fā)另一個事件的方法
下面小編就為大家分享一篇vue中阻止click事件冒泡,防止觸發(fā)另一個事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
懶加載簡單來說就是延遲加載或按需加載，即在需要的時候的時候進行加載。這篇文章主要介紹了vue路由懶加載及組件懶加載 ,需要的朋友可以參考下2019-06-06
vue filter 過濾器處理數(shù)據(jù)的作用,使用位置:mustache插值和v-bind表達式，過濾器用于文本轉換,復雜的數(shù)據(jù)處理則用computed，這篇文章主要介紹了Vue中的過濾器（filter）,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了詳解Vuex下Store的模塊化拆分實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
vue3.0使用vue-pdf-embed在線預覽pdf 控制頁碼顯示范圍不生效問題解決
這篇文章主要介紹了vue3.0使用vue-pdf-embed在線預覽pdf 控制頁碼顯示范圍不生效問題的問題及解決方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2023-01-01
這篇文章主要介紹了詳解vantUI框架在vue項目中的應用踩坑,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Vue的Router是一個用于實現(xiàn)頁面跳轉和路由管理的插件,它可以幫助我們根據(jù)不同的URL請求加載不同的組件,以及實現(xiàn)前端路由功能,本文給大家介紹vue中的Router基本配置命令,感興趣的朋友跟隨小編一起看看吧2024-02-02
Vue?Router路由hash模式與history模式詳細介紹
Vue?Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構建單頁面應用變得易如反掌。路由實際上就是可以理解為指向，就是我在頁面上點擊一個按鈕需要跳轉到對應的頁面，這就是路由跳轉2022-08-08