在Vue中如何修改v-for循环生成的单个对应元素？

核心问题是你之前的实现中所有按钮共享同一个全局状态变量，修改后全部按钮都会同步变更，只需要把按钮状态和单个商品项绑定即可，具体实现如下：

1. 给商品项新增独立状态标识 #

你的商品列表数组中每个商品对象需要单独新增isAdded布尔字段，默认值为false，用来标识当前商品是否被加入购物篮。如果商品数据来自后端接口，可以在拿到接口返回值后遍历新增字段：

// 接口请求回调示例
fetchGoods().then(res => {
  const goods = res.data.map(item => ({ ...item, isAdded: false }))
  this.goodsList = goods
})

2. 模板绑定对应商品的状态 #

v-for渲染时，按钮的文本和点击事件都和当前循环的商品项绑定，点击时将当前商品作为参数传入方法：

<template>
  <div class="goods-item" v-for="item in goodsList" :key="item.id">
    <!-- 商品名称、价格等展示逻辑省略 -->
    <button @click="handleAddBasket(item)">
      {{ item.isAdded ? '已添加' : '加入购物篮' }}
    </button>
  </div>
</template>

3. 点击方法中仅修改当前商品的状态 #

methods: {
  handleAddBasket(item) {
    // 这里写入调用加入购物篮接口、更新购物车数量等业务逻辑
    // 接口请求成功后，仅修改当前传入商品的isAdded状态
    item.isAdded = true
    // 如果需要临时展示「已添加」后恢复原文本，可加定时器：
    // setTimeout(() => {
    //   item.isAdded = false
    // }, 1500)
  }
}

注意事项 #

如果遇到修改isAdded后视图没有更新的情况，是Vue的响应式检测限制导致的，可以用$set方法更新字段保证响应式：

// Vue2 写法
this.$set(item, 'isAdded', true)
// Vue3 不需要特殊处理，直接赋值即可

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