如何在Vue中实现购物车商品去重？

嘿，我看到你在Vue购物车功能里遇到了重复添加商品的问题——每次点+按钮，购物车列表就会出现同一个商品的重复条目，这确实影响体验。其实问题出在你处理添加逻辑的方式上，下面我来帮你分析并给出修复方案：

问题根源 #

你的addClick方法里直接执行this.addcart.push(item)，每次点击都会把同一个商品对象直接添加到购物车数组中，而不是先检查购物车是否已有该商品。这就导致同一个商品被多次推入数组，自然出现重复条目。

修复后的完整代码 #

JavaScript部分（核心逻辑修改） #

const phone = [
  { id: "1", name: "Iphone 4S", price: 300, quantity: 0 },
  { id: "2", name: "Xiaomi", price: 200, quantity: 0 },
  { id: "3", name: "vivo X20", price: 320, quantity: 0 }
]
var app = new Vue({
  el: "#app",
  data: {
    phone: phone,
    addcart: [],
    showcart: false,
  },
  computed: {
    total() {
      let total = 0;
      // 修复总价计算：原来只加了单价，现在改为 单价×数量 的总和
      for (let i = 0; i < this.addcart.length; i++) {
        total += this.addcart[i].price * this.addcart[i].quantity;
      }
      return total;
    }
  },
  methods: {
    lessClick(item) {
      if (item.quantity > 0) {
        item.quantity -= 1;
        // 当数量减到0时，从购物车移除该商品
        const existingItem = this.addcart.find(cartItem => cartItem.id === item.id);
        if (existingItem && existingItem.quantity === 0) {
          const index = this.addcart.indexOf(existingItem);
          if (index > -1) {
            this.addcart.splice(index, 1);
            console.log("移除商品：", existingItem.name);
          }
        }
      }
    },
    addClick(item) {
      this.showcart = false;
      item.quantity += 1;
      // 先通过id检查购物车中是否已有该商品
      const existingItem = this.addcart.find(cartItem => cartItem.id === item.id);
      if (existingItem) {
        // 已有该商品，只更新数量（数量已经在上一步加过了，这里无需额外操作）
        console.log("商品已存在，更新数量：", item.name);
      } else {
        // 没有该商品，再添加到购物车
        this.addcart.push(item);
        console.log("添加新商品：", item.name);
      }
    },
    showCarts(){
      //this.showcart = true
    }
  }
})

HTML部分（无需修改） #

<div id="app">
  <ul class="cart-ul">
    <li v-for="(item,index) in phone">
      Product name： {{item.name}} <br>Product price：{{item.price}} <br>
      <a class="a-less" @click="lessClick(item)">-</a>
      <input type="text" v-model="item.quantity">
      <a class="a-add" @click="addClick(item)">+</a>
    </li>
  </ul>
  <!--<button @click="showCarts"> {{addcart.length}} </button>-->
  <div class="cart">
    <div>
      <ul>
        <li v-for="item in addcart">
          <p><strong>{{ item.quantity }}</strong> - {{ item.name }}</p>
        </li>
      </ul>
      <h5>Total: <span>{{ total }}</span></h5>
    </div>
  </div>
</div>

关键优化点说明 #

• 商品唯一性判断：通过商品的id来检测购物车中是否已有该商品（这是最可靠的判断方式，毕竟商品名称可能重复，但id是唯一标识）。
• 总价计算修复：原来的total计算只累加了商品单价，现在改为单价×数量的总和，保证总价计算准确。
• 减少数量逻辑优化：当商品数量减到0时，自动从购物车中移除该条目，避免出现数量为0的无效商品。

这样修改后，点击+按钮时就不会再重复添加商品到购物车了，只会更新已有商品的数量，购物车列表中的商品将保持唯一。

内容的提问来源于stack exchange，提问作者wen tian