如何用Vue.js实现购物车功能？现有代码交互效果无法正常显示

我帮你排查了代码里的几个关键问题，正是这些问题导致加减按钮的交互没效果，咱们一步步来修正：

问题分析 #

• 错误引用this.item：你的addCart和lessCart方法里用了this.item，但这个变量根本不存在——你已经把当前商品项通过参数item传进来了，应该直接用这个传入的item来操作count。
• count初始值是字符串类型：goods数组里的count是"0"（字符串），这会导致两个问题：一是v-show="item.count > 0"的判断逻辑异常，二是点击加号时会变成字符串拼接（比如"0"+1变成"01"），不是数字自增。
• lessCart方法未接收item参数：HTML里调用lessCart时传了item，但方法定义里没接收，导致无法修改对应商品的count值。

修正后的代码 #

JavaScript部分 #

// 把count改成数字0，确保数值类型正确
const goods = [
  { id: "1", goods_name: "水立方", goods_price: "30.00", goods_num: "15", count: 0 },
  { id: "2", goods_name: "农夫山泉", goods_price: "28.00", goods_num: "10", count: 0 }
]
var app = new Vue({
  el: "#app",
  data: {
    list: goods,
  },
  methods: {
    addCart(item) {
      // 直接操作传入的item，初始0的话自增就是1，无需多余判断
      item.count++;
    },
    lessCart(item) {
      // 接收item参数，同时判断count大于0时再减，避免出现负数
      if (item.count > 0) {
        item.count--;
      }
    }
  }
})

HTML部分 #

<div id="app">
  <ul>
    <li v-for="item in list">
      <p>{{item.goods_name}}</p>
      <p>{{item.goods_price}}</p>
      <!-- 直接用数字类型的item.count做判断 -->
      <a v-show="item.count > 0" @click.stop.prevent="lessCart(item)">-</a>
      <!-- 加.number修饰符，确保输入框内容解析为数字 -->
      <input v-show="item.count > 0" v-model.number="item.count">
      <!-- 无需传event，没有特殊需求的话可以省略 -->
      <a @click.stop.prevent="addCart(item)">+</a>
    </li>
  </ul>
</div>

额外优化说明 #

• 给v-model加上.number修饰符：确保输入框里的内容会被解析成数字，避免用户手动输入字符串导致逻辑异常。
• lessCart里增加判断：防止count变成负数，完美匹配你“count为0时隐藏减号”的需求逻辑。

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