vue清空f(shuō)orm對(duì)象的方法
vue清空f(shuō)orm對(duì)象
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
清空對(duì)象vule值，保留key
Object.keys(form).forEach((key) => (form[key] = ''))
使用組件ref清空
this.$refs['form'].resetFields()
暴力清空，不保留屬性
form ={}儲(chǔ)備式賦值
首先把form在頁(yè)面暫存
this.oldForm = JSON.parse(JSON.stringify(form))
做完處理操作后，再?gòu)?fù)制原始form對(duì)象
this.form = JSON.parse(JSON.stringify(oldForm ))
vue el-form 表單清空 初始化
如果用手寫屬性值=undefined 會(huì)帶來(lái)副作用影響，比如下次打開(kāi)，這個(gè)屬性沒(méi)了，然后頁(yè)面無(wú)法寫入，或是選擇項(xiàng)出現(xiàn)validate校驗(yàn)error ，這并不是我們想要的效果，推薦 使用官方已經(jīng)定義好的
resetFields
它需要具備三個(gè)條件，才能成功初始化。
1.el-form 里 加上 ref='form'
2.表單項(xiàng) 加上 prop="name"
3.this.$refs['form'].resetFields() // 清空表單
vue清空f(shuō)orm表單數(shù)據(jù)踩坑
關(guān)閉彈出框時(shí)，想要清空里面的form表單數(shù)據(jù)
this.$refs['form'].resetFields()
但是再次點(diǎn)開(kāi)時(shí)發(fā)現(xiàn)只清空了一部分，檢查后發(fā)現(xiàn)在寫form-item時(shí)漏掉了prop，如下：
<el-form-item label="主題描述" prop="themeDesc" class="input-item">
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- vue3中reactive的對(duì)象清空所引發(fā)的問(wèn)題解決方案(清空不了和清空之后再去賦值就賦值不了)
- Vue.js實(shí)現(xiàn)輸入框清空功能的兩種方式
- vue前端更新后需要清空緩存代碼示例
- vue3清空reactive的四種方式
- Vue3如何清空Reactive定義的數(shù)組
- vue中el-date-picker type=daterange日期清空時(shí)不回顯的解決
- vue返回首頁(yè)后如何清空路由問(wèn)題
- ant design vue 清空upload組件圖片緩存的問(wèn)題
- vue如何實(shí)現(xiàn)清空this.$route.query的值
- vue3清空l(shuí)et?arr?=?reactive([])的實(shí)現(xiàn)示例
相關(guān)文章
Vue3 + CSS實(shí)現(xiàn)一個(gè)噴火龍動(dòng)畫效果
不知不覺(jué)中,2023年已然逝去了,龍年到了,所以本文小編使用Vue3 + CSS實(shí)現(xiàn)一個(gè)噴火龍的動(dòng)畫效果,文中有相關(guān)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的同學(xué)可以自己動(dòng)手嘗試一下2024-02-02
Nuxt3項(xiàng)目中問(wèn)題匯總之刷新頁(yè)面useFetch無(wú)返回解決
Nuxt.js是一個(gè)基于 Vue.js 的服務(wù)端渲染應(yīng)用框架,這篇文章主要給大家介紹了關(guān)于Nuxt3項(xiàng)目中問(wèn)題匯總之刷新頁(yè)面useFetch無(wú)返回解決辦法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
Antd form表單的使用、設(shè)值、取值、清空值方式
這篇文章主要介紹了Antd form表單的使用、設(shè)值、取值、清空值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
計(jì)算圖片的MD5可以將其作為圖片的唯一標(biāo)識(shí),從而優(yōu)化對(duì)圖片的存儲(chǔ)和檢索效率,本文主要介紹了Vue獲取圖片MD5的常用方法,感興趣的可以了解下2024-12-12
Vue-Router實(shí)現(xiàn)頁(yè)面正在加載特效方法示例
這篇文章主要給大家介紹了利用Vue-Router實(shí)現(xiàn)頁(yè)面正在加載特效方法示例，文中給出了詳細(xì)的示例代碼，相信對(duì)大家具有一定的參考價(jià)值，有需要的朋友們下面來(lái)一起看看吧。2017-02-02
Vue 中使用lodash對(duì)事件進(jìn)行防抖和節(jié)流操作
這篇文章主要介紹了Vue 中使用lodash對(duì)事件進(jìn)行防抖和節(jié)流操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了Vue子組件監(jiān)聽(tīng)父組件值的變化方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了詳解Vue 事件驅(qū)動(dòng)和依賴追蹤 ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
vue實(shí)現(xiàn)添加標(biāo)簽demo示例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)添加標(biāo)簽demo示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
vue中的路由跳轉(zhuǎn)tabBar圖片和文字的高亮效果
這篇文章主要介紹了vue中的路由跳轉(zhuǎn)tabBar圖片和文字的高亮效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10