Vue.js购物车添加商品时push新数据覆盖旧数组内容问题求助

• 你将shoppingCart数组定义在了ProductCard组件的内部data中，而通过v-for渲染的每个ProductCard都是完全独立的组件实例，各自持有独立的shoppingCart副本。点击A商品的添加按钮时，仅会修改A组件内部的shoppingCart，数组中只会保存A商品；点击B商品的添加按钮时，修改的是B组件内部的shoppingCart，数组中只会保存B商品。每次触发EventBus传递的都是当前点击组件的私有数组，因此购物车永远只会显示最后添加的商品。
• 额外问题：quantity变量同样定义在每个ProductCard内部，重复添加同一款商品时的数量累加逻辑也会出错，无法实现全局统一的数量统计。

推荐采用父组件统一托管购物车状态的方案，逻辑清晰无需额外依赖，修改如下：

1. 修改Shop.vue #

将购物车数组和添加逻辑移到父级Shop组件中，监听子组件抛出的添加购物车事件：

<!-- 模板部分 -->
<div class="product-cards row">
  <ProductCard
     v-for="product in products" :key="product.id"
    :product="product"
    class="col-sm-6 col-lg-4"
    @add-to-cart="handleAddToCart"
  />
</div>

// script部分
export default {
  data() {
    return {
      products: [], // 保留原有商品列表逻辑
      shoppingCart: [] // 购物车数组统一在父组件维护
    }
  },
  methods: {
    handleAddToCart(product) {
      const foundItem = this.shoppingCart.find(item => item.id === product.id)
      if (foundItem) {
        // 商品已存在，数量+1
        foundItem.qty += 1
      } else {
        // 商品不存在，插入新条目
        this.shoppingCart.push({
          id: product.id,
          name: product.name,
          qty: 1,
          price: product.price,
          options: {
              old_price: product.old_price,
              image: product.image,
          }
        })
      }
      // 如果需要通知其他组件（比如顶部购物车组件）更新，在此处触发EventBus即可
      // EventBus.$emit('cartContents', this.shoppingCart)
    }
  }
}

2. 修改ProductCard.vue #

删除内部私有购物车和数量变量，点击按钮仅向父组件抛出当前商品即可：

<template>
  <button
    type="button"
    class="product__btn add_to_cart_btn"
    @click.prevent="$emit('add-to-cart', product)"
    :disabled="addCartLoading"
  >
    Add to cart
  </button>
</template>
<script>
export default {
    name: "ProductCard",
    props: {
        product: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            addCartLoading: false
            // 移除shoppingCart、quantity变量
        }
    }
}
</script>

如果你的项目规模较大，购物车逻辑需要跨多组件共享，也可以直接使用Pinia/Vuex全局管理购物车状态，实现逻辑和父组件托管类似，只是将状态存到全局store中即可。

内容的提问来源于stack exchange，提问作者Shekh Saifuddin