如何使用 vue 检查击键模糊？答案

【问题标题】：How do I check keystroke on blur using vue?如何使用 vue 检查击键模糊？
【发布时间】：2018-11-10 20:51:39
【问题描述】：

vue文档中没有说清楚，网上也没有找到类似的问题，所以在这里问一下。

我需要一个 vue 文本输入来返回最后一次击键是什么。与 blur 事件相关的方法包含一个数据对象，因此我无法捕获默认事件对象。我尝试使用自定义键功能，但模糊总是在它们之前触发，因此执行顺序错误。

在下面的示例中，“abcdef”是绑定到输入控件的数据对象。 (~~我删除了符号，因为 stackoverflow 无法解析它。~~)

<input
    type="text"
    v-model="abcdef.amount"
    @keyup.esc="cancelChange()"
    @keyup.enter="saveValue(abcdef)"
    @keyup.tab="saveValue(abcdef)"
    @focus="saveOriginalAmount(abcdef)"
    @blur="revertOriginalAmount(abcdef)">

在我的 vue 方法中

methods: {
    cancelChange(): {} //Triggers revertOriginalAmount
    saveValue(obj): {} //Save value
    saveOriginalAmount(): {} //Save the original value.
    revertOriginalAmount(): {} //Revert the value to original value
}

当触发 tab 键时，在 saveValue 之前立即调用 revertOriginalAmount()。因此，保存了原始值而不是当前值。我尝试在 revertOriginalAmount 中设置超时以延迟保存（500 毫秒），但它不起作用。此外，这只是解决潜在问题的廉价黑客，即检测哪些击键触发了模糊功能。

那么我应该在@blur的参数中传入什么来获取事件对象呢？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

参见https://vuejs.org/v2/guide/events.html#Methods-in-Inline-Handlers 中的$event。

@blur="revertOriginalAmount(abcdef, $event)"

$event 包含事件对象。

methods: {
    revertOriginalAmount(dataObject, event): {} //Revert the value to original value
}

【讨论】：