vue如何重置data的所有屬性
重置data的所有屬性
1.拿到data原始屬性
this.$options.data()
2.拿到當(dāng)前的data
this.$data
3.復(fù)制到當(dāng)前$data里面
Object.assign(this.$data, this.$options.data());
重置當(dāng)前頁(yè)面的data
問題一
在某些情況下，需要重新使用data中的數(shù)據(jù)，但是data中的數(shù)據(jù)已經(jīng)被各種表單、變量等賦值，那么怎么重置data的值呢？
解決方式：Object.assign()
JS相關(guān)函數(shù)
| 函數(shù) | 含義 |
|---|---|
| Object.assign(target, …sources) | 將所有可枚舉屬性值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象 |
vue中相關(guān)函數(shù)
| 函數(shù) | 含義 |
|---|---|
| this.$data | 當(dāng)前狀態(tài)下的data |
| this.$options.data() | 該組件初始狀態(tài)下的data |
所以，可以通過下面的方式重置當(dāng)前頁(yè)面的data：
Object.assign(this.$data, this.$options.data.call(this));
或者，單獨(dú)重置data中的某一個(gè)對(duì)象或者屬性：
this.form = this.$options.data().form
問題二
用 this.$options.data() 重置組件data時(shí)，data() 里用this獲取的props或methods都為undefined
原因
new Vue的時(shí)候傳了一個(gè)對(duì)象，把該對(duì)象記為options，Vue將options中自定義的屬性和Vue構(gòu)造函數(shù)中定義的屬性合并為vm.options，vm.options.data()中的this指向vm.options ，而methodA和B并沒有直接掛在vm.options下，所以this.methodA和this.B為undefined。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
vue+element加入簽名效果（移動(dòng)端可用）
這篇文章主要介紹了vue+element加入簽名效果（移動(dòng)端），本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
vue手機(jī)端input change時(shí),無(wú)法執(zhí)行的問題及解決
這篇文章主要介紹了vue手機(jī)端input change時(shí),無(wú)法執(zhí)行的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
對(duì)于vue來(lái)說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復(fù)用的，而組件實(shí)例的作用域是相互獨(dú)立，這意味著不同組件之間的數(shù)據(jù)無(wú)法互相引用，一般來(lái)說，組件之間可以有幾種關(guān)系，下面是我對(duì)組件之間消息傳遞的常用方式的總結(jié)2022-08-08
Vue3?中的?Composition?API?是一種新的編寫組件邏輯的方式,它提供了更好的代碼組織、類型推導(dǎo)、測(cè)試支持和復(fù)用性,本文為大家介紹了vue3利用組合式api創(chuàng)建單文件組件的方法,感興趣的可以了解下2023-08-08
vue2.0路由切換后頁(yè)面滾動(dòng)位置不變BUG的解決方法
下面小編就為大家分享一篇vue2.0路由切換后頁(yè)面滾動(dòng)位置不變BUG的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-03-03
這篇文章主要給大家介紹了關(guān)于vue路由的配置和頁(yè)面切換的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue執(zhí)行配置選項(xiàng)npm?run?serve的本質(zhì)圖文詳解
本地開發(fā)一般通過執(zhí)行npm run serve命令來(lái)啟動(dòng)項(xiàng)目,那這行命令到底存在什么魔法?下面這篇文章主要給大家介紹了關(guān)于vue執(zhí)行配置選項(xiàng)npm?run?serve的本質(zhì)的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了uni-app 的自定義組件，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
Vue3滑動(dòng)到最右驗(yàn)證功能實(shí)現(xiàn)
在登錄頁(yè)面需要啟動(dòng)向右滑塊驗(yàn)證功能,遇到這樣的需求怎么實(shí)現(xiàn)呢,下面小編通過示例代碼給大家分享Vue3滑動(dòng)到最右驗(yàn)證功能實(shí)現(xiàn),感興趣的朋友一起看看吧2024-06-06