第八章，购物车页面商品数量显示不正确的问题。
来源：8-10 控制购物车中的商品展示
前端小菜向神冲
2019-08-28
老师，在第八章购物车数量控制中，我按照视频代码实现，在重复添加相同商品至购物车时，购物车中此商品的数量并没有改变。
自己查原因，觉得可能是因为在NumberManager组件初始化时defaultNumber就已经传入，所以在NumberManager组件中就不会触发对defaultNumber的watch，所以组件内的number属性就是默认值1，而不是实际上商品的number属性。
我通过为NumberManager组件内的watch -> defaultNumber添加immediate属性解决问题。
但是我下载了老师的代码，发现并没有为watch添加immediate，也不会出现我遇到的问题，请问这是为什么呢？
写回答
1回答
-
如果想要让 number 可以被监听到变化，那么必须要保证的一点就是 ， number 他是一个响应式的数据 。这里涉及到 vue 的一个响应式的原理（具体可以参考我的这篇博课：https://www.imooc.com/article/80343 ），不太好解释。最简单的解释方式你需要知道，如果我们直接通过 goods.number 这种方式指定 number 字段的，那么 number 它不会是一个响应式的数据。
所以我们需要通过
Vue.set(goods, 'number', 1);
这种方式，来吧 number 变为响应式数据。
052019-08-31
相似问题