diff --git a/src/App.vue b/src/App.vue index e6a10b285f123ee7d1d9fdf8805998c6fe3fd086..b6874f4b2d287c74bcc8b188f9656f37687da2bd 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,10 +2,12 @@
- + - +
@@ -37,8 +39,14 @@ export default { }, // 更新商品状态的方法 updateGoodState({ id, state }) { - const item = this.list.find(item => item.id === id); // 查找到对应 id 的商品 - item.goods_state = state; // 更新对应商品的状态 + console.log(id,state); + this.list.some(item => { + if (item.id === id) {// 查找到对应 id 的商品 + item.goods_state = state; // 更新对应商品的状态 + return true + } + }); + }, // 修改全选状态的方法 changeAllState(state) { @@ -52,11 +60,11 @@ export default { }, // 计算选中商品的总价 totalAmount() { - return this.list.filter(item => item.goods_state).reduce((total, item) => total = item.goods_price * item.goods_count, 0); // 过滤出已选商品,然后用 reduce 计算商品总价 + return this.list.filter(item => item.goods_state).reduce((total, item) => total += item.goods_price * item.goods_count, 0); // 过滤出已选商品,然后用 reduce 计算商品总价 }, // 计算选中商品的数量 totalCount() { - return this.list.filter(item => item.goods_state).reduce((total, item) => total = item.goods_count, 0); // 过滤出已选商品,然后用 reduce 计算商品数量总和 + return this.list.filter(item => item.goods_state).reduce((total, item) => total += item.goods_count, 0); // 过滤出已选商品,然后用 reduce 计算商品数量总和 }, }, created() { @@ -64,8 +72,13 @@ export default { this.initBuyCars(); // 监听事件总线的 'goods-count-change' 事件,当事件触发时更改对应商品的数量 eventBus.on('goods-count-change', ({ id, value }) => { - const item = this.list.find(item => item.id === id); // 查找到对应 id 的商品 - item.goods_count = value; // 更新对应商品的数量 + this.list.some(item => {// 查找到对应 id 的商品 + if(item.id === id){ + item.goods_count = value; // 更新对应商品的数量 + return true + } + }); + }); }, }; diff --git a/src/components/Footer/Footer.vue b/src/components/Footer/Footer.vue index b2325bb73bdd4dc88fef8f8e779a2d1f68c2f323..3a87835c4ed9a1999a0ece67bc60306904fbcb48 100644 --- a/src/components/Footer/Footer.vue +++ b/src/components/Footer/Footer.vue @@ -36,7 +36,7 @@ export default { methods:{ // 切换所有商品的选中状态 toggleAllGoods(e){ - this.$emit('change-all-state', { value: e.target.checked }); + this.$emit('change-all-state', e.target.checked); }, } } diff --git a/src/components/Goods/Goods.vue b/src/components/Goods/Goods.vue index 335f7681669cff102d8a016157652492213b8c85..8b4ceb6d2d932cb6939a454b945d4e3be9ff5d5f 100644 --- a/src/components/Goods/Goods.vue +++ b/src/components/Goods/Goods.vue @@ -69,7 +69,7 @@ export default { // 切换商品选中状态 toggleGoodsChecked(e) { // 触发一个自定义事件,将商品 ID 和选中状态传递给父组件 - this.$emit('change-state', { id: this.id, isChecked: e.target.checked }); + this.$emit('change-state', { id: this.id, state: e.target.checked }); }, }, }