Vue中v-for操作导致列表首个项ID被覆盖的问题修复求助

问题现象 #

使用Vue结合Pinia开发购物车功能，store.cart内有3个独立商品对象。点击第2或第3个商品的+/-按钮时，对应商品ID会被修改为首个商品的ID；执行Pinia的updateQuantity方法时，总是返回首个商品，导致所有数量更新操作都只作用在第一个商品上。

错误原因 #

核心问题是语法错误：在find方法的回调函数中，使用了赋值运算符=而非相等比较运算符===。这会导致两个严重后果：

1. 遍历购物车时，会把当前商品的item.id强制赋值为传入的id，直接篡改了购物车内商品的ID；
2. 赋值表达式的返回值是赋值后的id（始终为真值），find方法会直接返回第一个遍历到的商品，后续商品不再被检查。

修复代码 #

修改Pinia Store的updateQuantity方法 #

import { defineStore } from 'pinia'

export const cartStore = defineStore('cart', {
  state: ()=>({
    cart: []
  }),

  actions:{
    async updateQuantity(id,logged,inc){
      console.log("The item id passed is:"+id);
      let user = JSON.parse(localStorage.getItem('user'));
      // 关键修复：将赋值运算符=改为全等比较运算符===
      let product = this.cart.find((item)=>item.item.id === id);
      
      // 新增空值判断，避免ID不存在时报错
      if (!product) {
        console.warn(`未找到ID为${id}的商品`);
        return;
      }

      console.log("the product is:"+JSON.stringify(product));
      console.log("the quantity of the product is:"+product.quantity);

      let newQuantity = product.quantity;
      console.log("The previous quantity is:"+newQuantity);
      if(inc) { newQuantity += 1; }
      else { newQuantity -= 1; }

      console.log("The new quantity is:"+newQuantity);
      if(logged){
        await fetch("https://localhost:7113/cart", {
          method: "POST",
          body: JSON.stringify({
            UserId:user.id,
            ItemId:product.item.id,
            Quantity:newQuantity
          }),
          headers: {
            "Content-type": "application/json; charset=UTF-8",
            "Access-Control-Allow-Origin": "*",
          }
        })
      }
      product.quantity = newQuantity;
    }
  }
})

额外优化建议 #

• 启用ESLint等代码检查工具，这类低级语法错误会被实时提示，避免重复踩坑；
• 购物车遍历的key已使用cartItem.item.id，保持当前写法即可，确保Vue的列表渲染正确追踪每个商品。

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