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.Baca JugaHow To Get The Next Obj When Looping In The Django ModelLooping Using Position Absolute To Form 9 BoxesHow To Use A Vue.js Plugin Inside A Custom Component?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 You may like these postsVue Router Navbar Element Not Showing DivHow To $set A Property To Multiple Objects In An Array But Have Retain Individual Reactivity In Vue JsTrying To Display Comments Near Appropriate Doc Range In Vue ComponentCannot Read Property 'ref' Of Undefined 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"