如何在 vue 上设置参数事件目标的值?

How to set value of argument event target on vue?

我有一个使用 debounce 插件 的输入值,它传递给事件。输入 dom 基于循环内的数组。 在某些情况下,我需要在与另一个数据进行比较后,从事件动作中将输入框的值设置为“0”。怎么做?

我的模板代码

<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 方法:

  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),

尝试过:

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

不要更改 DOM 中 input 元素的值。将数据绑定更改为 v-model

要访问事件处理程序中的正确项目,只需将 item 传递给处理程序并使用 $eventpass the original event data(如果您确实需要它)

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

现在您可以在 CalculateItem 中更改 item.qty,Vue 将更新 <input>

的内容

另外请注意,当创建这样的去抖函数时,给定组件的所有实例只有一个去抖函数 - 参见the docs(是的,文档适用于 Vue 3,但同样适用于 Vue 2)