Vue.set的使用

vue为了更加简洁，当data的数据是数组或者对象时，动态的添加或删除，视图将不会更新！！！

（在写购物车的加减商品时候，从父组件接收过来的商品数据用传统数组方法进行count属性添加后，点击加减按钮无法进行视图的更新）

Vue.set闪亮登场

 

 

 

以上是官方定义的写法格式

下面是我最终解决的项目案例：

 

 上图是购物车控制数量加减的组件

 

 

 该组件从父组件商品中接受一个food数据，这个数据对应的是每一个商品的信息，但是其中不包含数量的属性，我们要想实现每个商品数量的加减，必须通过动态添加 “数量” 属性然后渲染到视图中

如文章第一句，传统的方法无法达到效果。

我们使用Vue.set来为数据动态添加属性值

 

 

 注释部分请忽略！

首先判断该数据是否包含数量属性值，如果不包含在内，使用Vue.set进行添加

只对当前触发事件的元素有效！

 

 商品减少

最后完美实现增减效果

总结，只要是在data之外，想给data中定义的数组或者对象，添加或删除元素，就用Vue.set