Vue.js enter key and blur events together

Question

I am trying to make it so that if I press enter key or if element loses focus then it hides the element and shows a message. But the problem is that when I press the enter key and the element hides then it also triggers the blur event. It should only execute one of them.

Also how could I avoid having to repeat myself twice by calling the hideField() function. Can I call it only once (bur or key.enter)?

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

Here is a fiddle. http://jsfiddle.net/dag5ch26/3/

Answer 1

You should call the blur method on the keyup.enter event. This results in the blur event being triggered indirectly.

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