Vue中如何设置event target的参数值？防抖输入框赋值失效如何解决

问题原因 #

你直接修改e.target.value无效的核心原因是：input值通过v-model绑定了响应式变量item.qty，Vue的双向绑定机制会以响应式变量的值为准同步DOM，你手动修改DOM值会被后续的响应式更新覆盖，没有意义。
另外你是循环渲染的多个输入框，现有写法没有传递当前输入框对应的数组条目，也没法定位要修改的是哪个条目的值。

解决方法 #

1. 调整模板的事件传参，把当前循环的item实例和事件对象一起传入处理函数：

<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="(e) => CalculateItem(e, item)"
      v-model="item.qty"
    />
    <span class="input-group-append">
      <span class="input-group-text">Carton</span>
    </span>
  </div>
</div>

2. 修改防抖处理函数，直接修改对应条目的响应式变量即可，不需要操作DOM：

CalculateItem: _.debounce(function (e, currentItem) {
  const totalItem = _.sumBy(this.itemList, (item) => Number(item.qty));
  if(this.lineTotal < totalItem){
    this.dialogOverqty = true;
    // 直接修改响应式数据，v-model会自动同步更新input显示
    currentItem.qty = 0;
  } else {
    this.lineamount = this.lineTotal - totalItem;
  }
}, 500),

注意事项 #

如果item.qty不是item初始化时就声明的属性，属于后续新增的响应式属性，需要用this.$set(currentItem, 'qty', 0)赋值才能触发响应式更新。
如果存在多个输入框同时输入的场景，当前共用防抖实例的写法可能出现触发冲突，可根据需求给每个输入条目单独绑定防抖实例。

内容的提问来源于stack exchange，提问作者Bcktr