[Vuejs]-How can the value change immediately after I clicked add or minus

by

0👍

Take a look of this code in code proved above.

<div class="px-2">
     <b-form-input type="number" min="1" :max="data.quantity_available" :value="quantity"  v-model="data.cart_quantity" class="quantity-input"></b-form-input>
  </div>

Here it seems cart_quantity is getting used in template instead of quantity due to this it’s not getting updated.

to fix this issue, you can update the cart_quantity property of the data object instead of the quantity data property in the addQuantity and minusQuantity

methods: {
  addQuantity(id, style) {
    this.get_list.forEach(item => {
      if (item.id_product === id && item.id_style === style) {
        item.cart_quantity++;
      }
    });
  },
  minusQuantity(id, style) {
    this.get_list.forEach(item => {
      if (item.id_product === id && item.id_style === style) {
        item.cart_quantity--;
      }
    });
  }
}

Please remove watch property as well it seems not required.

0👍

The problem is that you are performing the add/minus operation on the quantity variable but in the template, you are using the cart_quantity variable which is not increasing/decreasing.

So, either use quantity or cart_quantity as per your logic.

addQuantity(id, style) {
  this.cart_quantity++;
  // If you are using quantity as v-model
  // this.quantity++
  this.updateQuantity(id, style);
},
minusQuantity(id, style) {
  this.cart_quantity--;
  // If you are using quantity as v-model
  // this.quantity--
  this.updateQuantity(id, style);
},

One more thing, you don’t need to use value and v-model together at the same time. If you want to give some initial value to the input, simply assign that value to your cart_quantity on mounted and use it further.

The last thing, you don’t need a watcher as well.

Leave a comment