我有一個Vue組件，它基本上做了以下事情：
我有一個Vue組件。
- 當安裝時，從一個遠程API加載一些資料，并使用回應資料初始化Vue模型。
- 當提交表單時，一些資訊需要從
userData物件中移除，這些資訊僅由后臺提供。 - 更新的回應將再次包含在#2中被洗掉的物件。 。
問題是。雖然回應資料是正確的（response.data包含userData.someNestedObject），但Vue并沒有更新視圖，即this.userData.someNestedObject不被顯示。但我不明白為什么。
data（）{
return {
userData: {}.
}
}
async mounted（） {
const response = await ApiService.getUser（）。
this.userData = response.data;
},
methods: {
async submit（） {
//從userData中洗掉一些不能包含在更新請求中的物件。
delete this.userData.someNestedObject。
//更新用戶和更新資料與回應。
const response = await ApiSerivce. updateUser(this.userData) 。
this.userData = response.data;
}
uj5u.com熱心網友回復：
這種情況的發生是因為Vue沒有用反應式屬性來包裹userData物件。要解決這個問題，你必須在data中完全描述userData。
如：
data（）{
return {
userData: {
someNestedObject:
}
}
或者在洗掉屬性時重新分配整個userData物件
比如：
methods: {
async submit（） {
//從userData中洗掉一些不能包含在更新請求中的物件。
const newUserData = this.userData。
delete newUserData.someNestedObject;
this.userData = newUserData;
//更新用戶和更新資料與回應。
const response = await ApiSerivce. updateUser(this.userData) 。
this.userData = response.data;
}
uj5u.com熱心網友回復：
來自Vue檔案（https://vuejs.org/v2/guide/reactivity.html#For-Objects）
"Vue 無法檢測屬性的添加或洗掉......屬性必須存在于資料物件中，以便 Vue 將其轉換并使其成為反應式屬性。"
要添加反應式屬性，必須在資料物件中存在。
要向一個物件添加反應式屬性，你必須使用
Vue.set(vm.someObject, 'b', 2)
或者
this.$set(this.someObject, 'b', 2)
或者你可以使用Object.assign來給一個新的物件分配新的屬性，這些屬性來自于舊物件和新物件：
this.userData = Object.assign({}, this.userData, response.data)。
uj5u.com熱心網友回復：
最后，@ikkoo的回答為我指出了正確的方向。我需要對物件進行深度復制，從而使它們的所有屬性和內部物件也被復制。
我最終使用了lodash的cloneDeep函式，該函式能夠作業并解決了我的問題：
this.userData = cloneDeep(response.data)
對于簡單的物件，你也可以使用JSON.parse(JSON.stringify(myObject))。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/327384.html
標籤：