如何根据Vue中给出的输入增加数量

Posted 2023-02-16

【中文标题】如何根据Vue中给出的输入增加数量

【英文标题】：How to increase the quantity according to the input given in Vue

【发布时间】：2021-11-02 06:31:43

【问题描述】：

我有一个这样的屏幕：

所以基本上我正在尝试将产品添加到购物车中。目前，我可以在单击按钮时执行此操作。但是我也想在输入字段中添加金额时添加它。所以如果没有数量，数量应该增加一次，如果输入的数量是5，点击按钮后数量需要增加5次。 为此我的html：

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

还有我的加入购物车方法：

addToCart() 
            this.$store.dispatch('addProductToCart', 
                product: this.product,
                quantity: 1
            )
        

所以目前，我可以在单击按钮时添加，但在输入输入时我无法添加金额。我是 vue 新手，如果你能帮助我，那就太好了。

【参考方案1】：

你考虑过this这样的东西吗？

<input type="number" v-model="quantity" />

后来你的方法

addToCart() 
  this.$store.dispatch("addProductToCart", 
    product: this.product,
    quantity: this.quantity // this.quantity here
  );

【讨论】：

感谢您的解决方案，但问题出在您的解决方案中，现在我在没有输入任何输入的情况下失去了点击按钮功能。而且它不添加，例如，我输入 5，它在购物车上显示 5，当我再次添加 5 而不是 10 时，它显示 55。

可能需要使用parseInt(this.quantity) 或v-model.number="quantity" 才能正常工作（见我的回答）。

【参考方案2】：

在组件的数据对象上创建itemsCount 属性：

data: function 
  return 
    itemsCount: ""
  

使用v-model 属性将您的输入值分配给itemsCount 属性。

<input type="number" class="col-1 form-control" v-model="itemsCount" />

重构 addToCart() 函数以考虑 itemsCount 值。

addToCart() 
  let quantity = this.itemsCount !== "" ? this.itemsCount : 1
  this.$store.dispatch('addProductToCart', 
    product: this.product,
    quantity: parseInt(quantity)
  )

【讨论】：

你可以使用 v-model.number="itemsCount" 代替 v-model="itemsCount" vuejs.org/v2/guide/forms.html#number