vue如何重置data的所有屬性
更新時間：2022年04月18日 12:06:05 作者：yangliweigauguagua
這篇文章主要介紹了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)前頁面的data
問題一
在某些情況下，需要重新使用data中的數(shù)據(jù)，但是data中的數(shù)據(jù)已經(jīng)被各種表單、變量等賦值，那么怎么重置data的值呢？
解決方式：Object.assign()
JS相關(guān)函數(shù)
| 函數(shù) | 含義 |
|---|---|
| Object.assign(target, …sources) | 將所有可枚舉屬性值從一個或多個源對象復(fù)制到目標(biāo)對象 |
vue中相關(guān)函數(shù)
| 函數(shù) | 含義 |
|---|---|
| this.$data | 當(dāng)前狀態(tài)下的data |
| this.$options.data() | 該組件初始狀態(tài)下的data |
所以，可以通過下面的方式重置當(dāng)前頁面的data：
Object.assign(this.$data, this.$options.data.call(this));
或者，單獨(dú)重置data中的某一個對象或者屬性：
this.form = this.$options.data().form
問題二
用 this.$options.data() 重置組件data時，data() 里用this獲取的props或methods都為undefined
原因
new Vue的時候傳了一個對象，把該對象記為options，Vue將options中自定義的屬性和Vue構(gòu)造函數(shù)中定義的屬性合并為vm.options，vm.options.data()中的this指向vm.options ，而methodA和B并沒有直接掛在vm.options下，所以this.methodA和this.B為undefined。
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue雙向綁定及觀察者模式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
將bmob js-sdk放在static目錄，然后在index.html頁面中已 script 標(biāo)簽的形式引入，就可以在vue中全局使用bmob js-sdk。下面通過本文給大家分享bmob js-sdk 在vue中的使用教程，需要的朋友參考下吧2018-01-01
vue2.0實(shí)現(xiàn)音樂/視頻播放進(jìn)度條組件
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)現(xiàn)音樂和視頻播放進(jìn)度條組件的思路及具體實(shí)現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
vue實(shí)現(xiàn)虛擬滾動渲染成千上萬條數(shù)據(jù)
本文主要介紹了vue實(shí)現(xiàn)虛擬滾動渲染成千上萬條數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
關(guān)于vue3.0中的this.$router.replace({ path: ''/''})刷新無效果問題
這篇文章主要介紹了關(guān)于vue3.0中的this.$router.replace({ path: '/'})刷新無效果問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要介紹了vue devserver及其配置方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
下面小編就為大家分享一篇解決iView中時間控件選擇的時間總是少一天的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue 頁面狀態(tài)保持頁面間數(shù)據(jù)傳輸?shù)囊环N方法(推薦)
vue router給我們提供了兩種頁面間傳遞參數(shù)的方式,一種是動態(tài)路由匹配，一種是編程式導(dǎo)航，接下來通過本文給大家介紹Vue 頁面狀態(tài)保持頁面間數(shù)據(jù)傳輸?shù)囊环N方法,需要的朋友可以參考下2018-11-11
vue3輸入無效路由跳轉(zhuǎn)到指定error頁面問題
這篇文章主要介紹了vue3輸入無效路由跳轉(zhuǎn)到指定error頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue+element_ui上傳文件,并傳遞額外參數(shù)操作
這篇文章主要介紹了vue+element_ui上傳文件,并傳遞額外參數(shù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12