vue清空form對象的方法

更新時間：2022年09月08日 17:18:37 作者：xielatian

這篇文章主要介紹了vue清空form對象的方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue清空form對象

const form ={
?? ?name:'aaa',
?? ?age:18
}

vue 刷新全局數(shù)據(jù)，回歸到初始化狀態(tài)

Object.assign(this.$data, this.$options.data())

清空具體的form

this.form = this.$options.data().form

清空對象vule值，保留key

Object.keys(form).forEach((key) => (form[key] = ''))

使用組件ref清空

this.$refs['form'].resetFields()

暴力清空，不保留屬性

form ={}

儲備式賦值

首先把form在頁面暫存

this.oldForm = JSON.parse(JSON.stringify(form))

做完處理操作后，再復制原始form對象

this.form = JSON.parse(JSON.stringify(oldForm ))

vue el-form 表單清空初始化

如果用手寫屬性值=undefined 會帶來副作用影響，比如下次打開，這個屬性沒了，然后頁面無法寫入，或是選擇項出現(xiàn)validate校驗error ，這并不是我們想要的效果，推薦使用官方已經(jīng)定義好的

resetFields

它需要具備三個條件，才能成功初始化。

1.el-form 里加上 ref='form'

2.表單項加上 prop="name"

3.this.$refs['form'].resetFields() // 清空表單

vue清空form表單數(shù)據(jù)踩坑

關閉彈出框時，想要清空里面的form表單數(shù)據(jù)

this.$refs['form'].resetFields()

但是再次點開時發(fā)現(xiàn)只清空了一部分，檢查后發(fā)現(xiàn)在寫form-item時漏掉了prop，如下：

<el-form-item label="主題描述" prop="themeDesc" class="input-item">

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue3 + CSS實現(xiàn)一個噴火龍動畫效果
不知不覺中,2023年已然逝去了,龍年到了,所以本文小編使用Vue3 + CSS實現(xiàn)一個噴火龍的動畫效果,文中有相關的代碼示例供大家參考,具有一定的參考價值,感興趣的同學可以自己動手嘗試一下
2024-02-02
Nuxt3項目中問題匯總之刷新頁面useFetch無返回解決
Nuxt.js是一個基于 Vue.js 的服務端渲染應用框架,這篇文章主要給大家介紹了關于Nuxt3項目中問題匯總之刷新頁面useFetch無返回解決辦法的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-03-03
Antd form表單的使用、設值、取值、清空值方式
這篇文章主要介紹了Antd form表單的使用、設值、取值、清空值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue獲取圖片MD5的方法詳解
計算圖片的MD5可以將其作為圖片的唯一標識,從而優(yōu)化對圖片的存儲和檢索效率,本文主要介紹了Vue獲取圖片MD5的常用方法,感興趣的可以了解下
2024-12-12
Vue-Router實現(xiàn)頁面正在加載特效方法示例
這篇文章主要給大家介紹了利用Vue-Router實現(xiàn)頁面正在加載特效方法示例，文中給出了詳細的示例代碼，相信對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。
2017-02-02
Vue 中使用lodash對事件進行防抖和節(jié)流操作
這篇文章主要介紹了Vue 中使用lodash對事件進行防抖和節(jié)流操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue子組件監(jiān)聽父組件值的變化
這篇文章主要介紹了Vue子組件監(jiān)聽父組件值的變化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
詳解Vue 事件驅動和依賴追蹤
本篇文章主要介紹了詳解Vue 事件驅動和依賴追蹤，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
vue實現(xiàn)添加標簽demo示例代碼
本篇文章主要介紹了vue實現(xiàn)添加標簽demo示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-01-01
vue中的路由跳轉tabBar圖片和文字的高亮效果
這篇文章主要介紹了vue中的路由跳轉tabBar圖片和文字的高亮效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10