Vue重置當前頁面的data

問題一

在某些情況下,需要重新使用data中的數據,但是data中的數據已經被各種表單、變量等賦值,那麼怎麼重置data的值呢?

解決方式:Object.assign()

JS相關函數

函數 含義
Object.assign(target, …sources) 將所有可枚舉屬性值從一個或多個源對象複製到目標對象

vue中相關函數

函數 含義
this.$data 當前狀態下的data
this.$options.data() 該組件初始狀態下的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構造函數中定義的屬性合併爲vm.optionsvm.options,vm.options.data()中的this指向vm.optionsmethodABvm.options,而methodA和B並沒有直接掛在vm.options下,所以this.methodA和this.B爲undefined。

參考鏈接

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章