如何使用vue检查模糊按键?

时间:2018-05-31 19:01:53

标签: javascript vue.js

在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的参数中传递什么来获取事件对象?

1 个答案:

答案 0 :(得分:0)

请参阅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
}