Vue: When To Use @keyup.native In Input Elements October 27, 2023 Post a Comment I have a Vue component with an element that binds the v-on:keyup.enter key to doFilter() a that binds the v-on:click event to doFilter() Solution 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.Solution 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). Share Post a Comment for "Vue: When To Use @keyup.native In Input Elements"
Post a Comment for "Vue: When To Use @keyup.native In Input Elements"