How to set value of argument event target on vue?

I have an input value using debounce plugin, that passing to the event. The input dom is based on an array inside looping. At some conditions, I need to set the value that the input box to “0” from the event action after being compared with another data. How to do that?

My template code

<div class="form-group row">
<label class="col-form-label col-lg-2">QTY</label>
<div class="col-lg-10">
  <div class="input-group" style="width: 300px !important">
    <input
      type="text"
      class="form-control"
      @input="CalculateItem"
      v-model="item.qty"
    />
    <span class="input-group-append">
      <span class="input-group-text">Carton</span>
    </span>
  </div>
</div>

Vue method :

  CalculateItem: _.debounce(function (e) {
  console.log(e.target);

  var totalItem = _.sumBy(this.itemList, (item) => Number(item.qty));
  if(this.lineTotal<totalItem){
            this.dialogOverqty = true;
            e.target.value=0;
  }
  else{
         this.lineamount = this.lineTotal - totalItem;
  }
  

  }, 500),

Have tried :

 e.target.value=0; //not working

Answer

Do not change the value of the input element in the DOM. Change the data bound as v-model

To get access to correct item in the event handler, just pass the item into the handler and use $event to pass the original event data as well (if you actually need it)

<input
      type="text"
      class="form-control"
      @input="CalculateItem($event, item)"
      v-model="item.qty"
    />

Now you can change item.qty inside CalculateItem and Vue will update the content of the <input>

Also note that when creating debounced function like that, there is only one debounced function for all instances of given component – see the docs (yes, the docs are for Vue 3 but same applies to Vue 2)