Vue中如何根据输入框数值设置添加到购物车的商品数量

解决方案 #

你可以通过Vue的v-model双向绑定特性快速实现需求，步骤如下：

1. 修改模板代码，给数量输入框绑定响应式变量，同时可以设置min="1"限制用户不能输入小于1的数值：

<div class="row number-of-tickets">
  <input 
    type="number" 
    class="col-1 form-control"
    v-model="buyQuantity"
    min="1"
  />
  <button class="btn button col-2" @click="addToCart()">Add to cart</button>
</div>

2. 在组件的data选项中声明绑定的变量：

data() {
  return {
    // 初始值可以设为空，也可以设为1
    buyQuantity: ''
  }
}

3. 修改addToCart方法，增加数量判断逻辑：

addToCart() {
  // 处理输入值：如果输入为空、非数字或者小于1，默认取1
  const quantity = Number(this.buyQuantity)
  const finalQuantity = quantity >= 1 ? quantity : 1
  this.$store.dispatch('addProductToCart', {
    product: this.product,
    quantity: finalQuantity
  })
  // 可选：添加成功后清空输入框
  this.buyQuantity = ''
}

如果你不想新增响应式变量，也可以给input加ref属性，通过this.$refs.xxx.value直接读取输入框的值，不过更推荐使用v-model的方案，更符合Vue的开发规范。

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