如何处理自定义 Vuetify 输入的模糊和输入 keyup 事件？答案

【问题标题】：How to handle blur and enter keyup events for custom Vuetify input?如何处理自定义 Vuetify 输入的模糊和输入 keyup 事件？
【发布时间】：2021-04-21 16:33:12
【问题描述】：

我遇到了一些使用自定义“就地编辑”Vuetify 文本输入的添加情况。我注意到在输入键的 keyup 上，有两个请求被发送到我的后端以更新该字段。我知道是什么导致了这个问题，只是不知道如何解决它！

我有这个文本字段：

<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()，因此文本字段运行此功能第二次。第二行在输入中仍然有闪烁的光标，所以它也不是真正的“停用”。

最终，我正在寻找一种允许用户按 Enter 键或在输入外部单击以触发请求（显然没有触发两次）并停用输入的方法。有人有什么建议吗？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

如果我理解正确，您希望在输入被选项卡/单击时发出本地值，或者如果按下回车键但在发出时不加倍。

如果按下回车键，我们需要以编程方式取消焦点，这将触发模糊侦听器。如果输入没有聚焦（通过外部单击或 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);
}

【讨论】：