Vue.js一起输入键和模糊事件

Question

我试图这样做，以便如果按Enter键或元素失去焦点，则它会隐藏该元素并显示一条消息。但是问题在于，当我按下Enter键并且元素隐藏时，它也会触发模糊事件。它应该只执行其中之一。

另外，如何避免通过调用hideField（）函数重复两次自己。我只能调用一次（bur或key.enter）吗？

<input id="name" v-on:blur="hideField('name')" v-on:keyup.enter="hideField('name')">

这是一个小提琴。 http://jsfiddle.net/dag5ch26/3/

Answer 1

您应该在keyup.enter事件上调用blur方法。这导致模糊事件被间接触发。

<input id="name" v-on:blur="hideField('name')" v-on:keyup.enter="$event.target.blur()">

Answer 2

考虑到您的示例的局限性，我认为没有必要enter像您那样触发该事件。正如您所看到的，keyup.enter事件也会触发blurs事件，那么为什么不依赖独占呢blur？我知道您可能简化了您的用例，但我在这里看不到原因keyup.enter。

附带说明一下，您可以仅使用元素 event.target引用，而不是通过 ID 选择元素。例如@v-on:blur="hideField"。该事件将自动传递到hideField()。或者，您可以将@v-on:blur="hideField($event.target)"元素本身传递给方法。这简化了您的调用并减少了不必要的查找。

我在这里更新了小提琴： http: //jsfiddle.net/dag5ch26/7/