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

Question

我有一个使用 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

Answer 1

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

要访问事件处理程序中的正确项目，只需将 item 传递给处理程序并使用 $event 到 pass 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）

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

How to set value of argument event target on vue?

javascript

events

vuejs2

html-input