解决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