Vue 重置data的數(shù)據(jù)為初始狀態(tài)操作
在某些情況下,需要重新使用data中的數(shù)據(jù),但是data中的數(shù)據(jù)已經(jīng)被各種表單、變量等賦值,那么怎么重置data的值呢?
1. 逐個(gè)賦值...data() { return { name: ’’, sex: ’’, desc: ’’ }}...// 逐個(gè)賦值this.name = ’’this.sex = ’’this.desc = ’’
這個(gè)方法比較笨,當(dāng)然也可以實(shí)現(xiàn)效果,但是一個(gè)一個(gè)去重新賦值比較麻煩而且代碼看起來也會(huì)比較亂。
下面這個(gè)方法肯定是你喜歡的,一行代碼搞定~
2. 使用Object.assign()MDN關(guān)于該方法的介紹:Object.assign() 方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。
用法: Object.assign(target, ...sources)
第一個(gè)參數(shù)是目標(biāo)對(duì)象,第二個(gè)參數(shù)是源對(duì)象,就是將源對(duì)象屬性復(fù)制到目標(biāo)對(duì)象,返回目標(biāo)對(duì)象
其中就是將一個(gè)對(duì)象的屬性copy到另一個(gè)對(duì)象
vue中:
this.$data 獲取當(dāng)前狀態(tài)下的data
this.$options.data() 獲取該組件初始狀態(tài)下的data
所以,下面就可以將初始狀態(tài)的data復(fù)制到當(dāng)前狀態(tài)的data,實(shí)現(xiàn)重置效果:
Object.assign(this.$data, this.$options.data())
當(dāng)然,如果你只想重置data中的某一個(gè)對(duì)象或者屬性:
this.form = this.$options.data().form
擴(kuò)展
Object.assign(target, ...sources) 方法還可以用來合并對(duì)象:
const o1 = { a: 1 };const o2 = { b: 2 };const o3 = { c: 3 };const obj = Object.assign(o1, o2, o3);console.log(obj); // { a: 1, b: 2, c: 3 }console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目標(biāo)對(duì)象自身也會(huì)改變。
如果對(duì)象中含有相同屬性,取最后一個(gè)屬性:
const o1 = { a: 1, b: 1, c: 1 };const o2 = { b: 2, c: 2 };const o3 = { c: 3 };const obj = Object.assign({}, o1, o2, o3);console.log(obj); // { a: 1, b: 2, c: 3 } 屬性取最后一個(gè)對(duì)象的屬性
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教。
相關(guān)文章:
1. 以PHP代碼為實(shí)例詳解RabbitMQ消息隊(duì)列中間件的6種模式2. html小技巧之td,div標(biāo)簽里內(nèi)容不換行3. PHP字符串前后字符或空格刪除方法介紹4. 將properties文件的配置設(shè)置為整個(gè)Web應(yīng)用的全局變量實(shí)現(xiàn)方法5. nestjs實(shí)現(xiàn)圖形校驗(yàn)和單點(diǎn)登錄的示例代碼6. AspNetCore&MassTransit Courier實(shí)現(xiàn)分布式事務(wù)的詳細(xì)過程7. XML入門的常見問題(一)8. jsp cookie+session實(shí)現(xiàn)簡易自動(dòng)登錄9. css進(jìn)階學(xué)習(xí) 選擇符10. Echarts通過dataset數(shù)據(jù)集實(shí)現(xiàn)創(chuàng)建單軸散點(diǎn)圖
