解決vuejs 建立數據後設置對象的屬性實現不了雙向綁定問題

版權聲明：本文爲博主原創文章，遵循 CC 4.0 by-sa 版權協議，轉載請附上原文出處連接和本聲明。
本文連接：https://blog.csdn.net/yibowanbo/article/details/80233051
拋出踩坑：vue建立後的數據，自定義設置對象的屬性，實現不了雙向綁定
當業務場景，須要在請求接口數據新增自定義的屬性

let foodList = [
{title: '回鍋肉', price: 99.0},
{title: '油燜大蝦', price: 199.0}
];
1
2
3
4
咱們要作數量增長時候，後自定義添加數量屬性quantity：

// 添加自定義屬性數量quantity
foodList.forEach(item => {
item.quantity = 0;
});

/**
[
{ title: '回鍋肉', price: 99, quantity: 0 },
{ title: '油燜大蝦', price: 199, quantity: 0 }
]

*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
咱們須要對數量增長的時候，quantity是實現不了雙向綁定的，好比：

// 特殊菜數量添加
quantityAction(type, item) {
// 加法
if (type === 'add') {
item.quantity++
} else {
// 減法
if (item.quantity > 0) {
item.quantity--
}
}
}
// 幾時quantity是在增減，實際頁面是達不到雙向綁定的
1
2
3
4
5
6
7
8
9
10
11
12
13
解決方法：
這時候須要用$set方法，設置對象的屬性。

若是對象是響應式的，確保屬性被建立後也是響應式的，同時觸發視圖更新。這個方法主要用於避開 Vue 不能檢測屬性被添加的限制。

vm.$set( target, key, value )
- 參數：
- {Object | Array} target
- {string | number} key
- {any} value
- 返回值：設置的值。
1
2
3
4
5
6
用法：

foodList.forEach(item => {
this.$set(item, 'quantity', 0)
});
1
2
3
這樣後面建立的屬性就能夠達到雙向綁定了！
————————————————
版權聲明：本文爲CSDN博主「一波萬波」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處連接及本聲明。
原文連接：https://blog.csdn.net/yibowanbo/article/details/80233051