版权声明：本文为博主原创文章，遵循 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