版權聲明：本文為博主原創文章，遵循 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