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