Vue: when to use @keyup.native in input elements

Question

I have a Vue component with

1. an element that binds the v-on:keyup.enter key to doFilter()
2. a

Answer 1

Based on your comments, I'm assuming that you're using the Vue Material libary and the <md-input> component instead of an <input> element.

If you listen to the keyup event without using the .native modifier (via <md-input @keyup.enter="doFilter">), then your component is waiting for the <md-input> component to emit a custom keyup event.

But, that component does not emit a keyup event, so the doFilter method will never be called.

As the documentation states, adding the .native modifier will make the component listen for a "native event on the root element" of the <md-input> component.

So, <md-input @keyup.native.enter="doFilter"> will listen to the native keyup DOM event of the root element of the <md-input> component and call the doFilter method when that is triggered from the Enter key.

Answer 2

I had the same problem on a custom vue component on which I was listening to both @select and @keyup.native.enter and I was receiving the Enter key twice because I didn't pay attention: onSelect emits an onKeyDown for Enterand onkeyUp flared secondly.

My solution was to listen to @keydown.native.enter so that the @select cycle of keys was unbothered (which is keydown -> keypresssed -> keyup).