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

【问题标题】：How to set value of argument event target on vue?如何在 vue 上设置参数事件目标的值？
【发布时间】：2021-11-02 20:55:44
【问题描述】：

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

【问题讨论】：

标签： javascript events vuejs2 html-input

【解决方案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)

【讨论】：