如何处理模糊和进入keyup事件自定义Vuetify输入?

Question

我有一个自定义的"就地编辑"验证文本输入。我注意到，在输入键的键上，有两个请求被发送到我的后端来更新字段。我知道是什么导致了这个问题，只是不知道如何解决它!

我有这个文本域:

<v-text-field
    :id="uniqueIdentifier"
    :ref="uniqueIdentifier"
    v-focus
    v-mask="mask"
    :class="[ 'click-to-edit', active ? 'active' : 'b-none', customClass ]"
    color="primary"
    dense
    :full-width="false"
    hide-details
    outlined
    :style="{...customStyle}"
    :type="type"
    :value="localValue"
    @blur="handleUpdateItem($event)"
    @click="activateInput"
    @keyup.enter.native="handleUpdateItem($event)" />

可以看到，我触发了@blur和@keyup.enter.native事件来更新文本字段。更新字段的方法如下所示:

handleUpdateItem (e) {
  this.localValue = e.target.value;
  this.active = false;
  this.$emit('handle-update-item', this.localValue);
  // if (e.type === 'keyup') { this.$refs[this.uniqueIdentifier].blur(); }
  // if (e.type === 'keyup') { this.active = false; }
}

该方法的最后两行被注释掉的是我的尝试，目的是"取消激活"。输入点击进入，但是因为第一行然后运行.blur()，文本字段第二次运行这个函数。第二行输入中仍然有闪烁的光标，所以它并不是真正的"deactivate";。

最终，我正在寻找的是一种方法，允许用户按下回车键或单击输入之外的按钮来触发请求(显然没有触发两次)并停用输入。有人有什么建议吗?

Answer 1

如果我理解正确，您希望在输入选项卡/单击退出或按下enter键但不双击发出时发出本地值。

如果回车键被按下，我们需要程序性地取消焦点，这将触发模糊监听器。如果输入是未聚焦的(使用外部的click或tab键或前面提到的未聚焦)，那么我们需要发出值。

<v-text-field
  ...
  @keyup.native.enter="$refs[uniqueIdentifier].blur()"
  @blur="handleUpdateItem($event)"
/>

handleUpdateItem (e) {
  this.localValue = e.target.value;
  this.active = false;
  this.$emit('handle-update-item', this.localValue);
}