How can the value change immediately after I clicked add or minus-CodePudding

Hi currently I am making a add & minus function and the problem I am facing is once I clicked add or minus, the value still remain the same... I use the watch property also and it still not working

The get_list is calling from a API

<b-row v-for="(data,i) in get_list" :key="i" >>
 <b-button pill
     
     @click="addQuantity(data.id_product,data.id_style)"
  >
       <span style="transform: translateY(-5%);"> </span>
  </b-button>

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

script

 data: () => ({
 
        get_list: [],
        quantity:0,

       
    }),

method :{

        addQuantity(id,style) {
            this.quantity  
            this.updateQuantity(id,style)
        },
        minusQuantity(id,style) {
            
                this.quantity--
                this.updateQuantity(id,style)
            
        },
},

 watch: {
        quantity(newVal, oldVal) {
            console.log('new' newVal)
      
          
        }
    }

CodePudding user response：

Take a look of this code in code proved above.

<div >
     <b-form-input type="number" min="1" :max="data.quantity_available" :value="quantity"  v-model="data.cart_quantity" ></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.

CodePudding user response：

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.