快捷導(dǎo)航

vue清空form對象的方法

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

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

vue清空form對象

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

vue 刷新全局?jǐn)?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))

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

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

vue el-form 表單清空初始化

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

resetFields

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

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

2.表單項(xiàng) 加上 prop="name"

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

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

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

Vue3?響應(yīng)式高階用法之customRef()的使用
customRef()是Vue3的高級工具,允許開發(fā)者創(chuàng)建具有復(fù)雜依賴跟蹤和自定義更新邏輯的ref對象,本文詳細(xì)介紹了customRef()的使用場景、基本用法、功能詳解以及最佳實(shí)踐,包括防抖、異步更新等用例,旨在幫助開發(fā)者更好地理解和使用這一強(qiáng)大功能
2024-09-09
vue3監(jiān)聽路由的變化代碼示例
在vue項(xiàng)目中假使我們在同一個路由下,只是改變路由后面的參數(shù)值,期望達(dá)到數(shù)據(jù)的更新,這篇文章主要給大家介紹了關(guān)于vue3監(jiān)聽路由的變化的相關(guān)資料,需要的朋友可以參考下
2023-09-09
vue之debounce屬性被移除及處理詳解
今天小編就為大家分享一篇vue之debounce屬性被移除及處理詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
基于Vue中點(diǎn)擊組件外關(guān)閉組件的實(shí)現(xiàn)方法
下面小編就為大家分享一篇基于Vue中點(diǎn)擊組件外關(guān)閉組件的實(shí)現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue實(shí)現(xiàn)上傳圖片添加水印
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)上傳圖片添加水印，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
vue 自定義icon圖標(biāo)的步驟
這篇文章主要介紹了vue 自定義icon的圖標(biāo)的步驟，文中大概給大家分為兩步驟，通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下
2021-08-08
Vue3組件更新中的DOM?diff算法示例詳解
虛擬dom是當(dāng)前前端最流行的兩個框架（vue和react）都用到的一種技術(shù),都說他能幫助vue和react提升渲染性能,提升用戶體驗(yàn),下面這篇文章主要給大家介紹了關(guān)于Vue3組件更新中的DOM?diff算法的相關(guān)資料,需要的朋友可以參考下
2022-04-04
vue.js自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼
這篇文章主要介紹了vue.js自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
vue實(shí)現(xiàn)瀏覽器桌面通知的示例代碼
本文主要介紹了vue實(shí)現(xiàn)瀏覽器桌面通知的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
Vue打包為相對路徑的具體實(shí)現(xiàn)方法
在Vue.js項(xiàng)目中,構(gòu)建后的資源文件（如CSS、JavaScript文件、圖片等）通常會被放置在指定的目錄下,為了確保這些文件能夠被正確加載,Vue CLI 提供了配置選項(xiàng)來指定這些文件的路徑,本文給大家介紹了Vue打包為相對路徑的具體實(shí)現(xiàn)方法,需要的朋友可以參考下
2024-09-09