Vue中点击加减按钮后数值无法实时更新的问题求助

问题核心原因 #

1. 你用了全局的quantity变量管理数量，但输入框绑定的是每个列表项的data.cart_quantity，两者完全没有关联——点击加减按钮修改的是全局quantity，输入框根本没用到这个值，所以数值自然不变。
2. 监听全局quantity的watch完全无用，因为输入框的v-model和它没有任何绑定关系。
3. 加减方法里没有更新对应列表项的cart_quantity，等于做了无效操作。

修复步骤 #

1. 删除全局的quantity变量，直接操作每个列表项自身的cart_quantity字段
2. 修改加减方法，根据传入的id_product和id_style找到对应的列表项，更新它的cart_quantity
3. 移除无用的watch监听
4. 确保从API获取get_list后，每个项都初始化cart_quantity（比如默认设为1）

修改后的代码示例 #

HTML部分（移除多余的:value="quantity"）

<b-row v-for="(data,i) in get_list" :key="i" class="mt-3 mx-0">
  <b-button pill
      class="quantity-btn btn-secondary"
      @click="addQuantity(data.id_product,data.id_style)"
   >
        <span style="transform: translateY(-5%);">+</span>
   </b-button>

   <div class="px-2">
      <b-form-input type="number" min="1" :max="data.quantity_available" v-model="data.cart_quantity" class="quantity-input"></b-form-input>
   </div>
    <b-button pill
       class="quantity-btn btn-secondary"
       @click="minusQuantity(data.id_product,data.id_style)"
     >
      <span style="transform: translateY(-5%);">-</span>
     </b-button>
</b-row>

Script部分

data: () => ({ 
    get_list: [],
}),

methods: {
    // 获取API数据后初始化cart_quantity
    async fetchData() {
        const res = await /* 你的API请求逻辑 */;
        this.get_list = res.data.map(item => ({
            ...item,
            cart_quantity: 1 // 默认初始数量设为1
        }));
    },
    addQuantity(id, style) {
        const targetItem = this.get_list.find(item => item.id_product === id && item.id_style === style);
        if (targetItem && targetItem.cart_quantity < targetItem.quantity_available) {
            targetItem.cart_quantity++;
            this.updateQuantity(id, style);
        }
    },
    minusQuantity(id, style) {
        const targetItem = this.get_list.find(item => item.id_product === id && item.id_style === style);
        if (targetItem && targetItem.cart_quantity > 1) {
            targetItem.cart_quantity--;
            this.updateQuantity(id, style);
        }
    },
    updateQuantity(id, style) {
        // 此处编写你的数量更新逻辑
    }
}

额外注意点 #

• 确保updateQuantity方法里使用的是对应项的cart_quantity，而非原来的全局变量
• 如果API返回的项本身就包含cart_quantity字段，可省略fetchData里的初始化步骤

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