vue中如何根据给定的输入增加数量

How to increase the quantity according to the input given in Vue

我的屏幕是这样的:

所以基本上我是在尝试将产品添加到购物车中。目前,我可以在单击按钮时执行此操作。但我也想在输入字段中添加金额时添加它。因此,如果没有金额,则数量应增加一次,如果输入的金额为 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 新手,如果你能帮助我,那就太好了。

您是否考虑过类似 this 的事情?

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

然后是你的方法

addToCart() {
  this.$store.dispatch("addProductToCart", {
    product: this.product,
    quantity: this.quantity // this.quantity here
  });
}
  1. 在组件的数据对象上创建 itemsCount 属性:

    data: function {
      return {
        itemsCount: ""
      }
    }
    
  2. 使用 v-model 属性将输入的值分配给 itemsCount 属性.

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

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

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