Enter with @keyup event not working in Vue
I am trying to call method on pressing enter key but it\'s not working. Code is as below.
-
I experienced inconsistent results when using native JS with window.addEventListener. VueJS natively supports modifying behavior for keyboard events https://vuejs.org/v2/guide/events.html#Key-Modifiers
This also worked a lot better in my case due to needing separate behavior for the tab key.
Your input can look like this with custom modifiers on each key up|down
<input type="text" class="form-control" placeholder="Start typing to search..." v-model="search_text" @focus="searchFocus" @blur="searchFocusOut" v-on:keyup.enter="nextItem" v-on:keyup.arrow-down="nextItem" v-on:keyup.arrow-up="nextItem" v-on:keydown.tab="nextItem" >Then inside NextItem you can reference the event, and get each key.. or write a separate function for each key modifier.
讨论(0) -
The
clickevent already triggers with the ENTER key (it also triggers with Space in some browsers, like Chrome for desktop). So, your code only needs a@click="callEvent"and everything works well since the focus is already on the button:var app = new Vue({ el: "#app", methods: { callEvent() { console.log("Event called"); } } });<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> <div id="app"> <button @click="callEvent">Enter</button> </div>If you want that any ENTER triggers the button even if it isn't with focus, you should bind the event to the
windowobject, which can be made inside themountedhandler:var app = new Vue({ el: "#app", methods: { callEvent() { console.log("Event called"); } }, mounted() { window.addEventListener('keyup', function(event) { if (event.keyCode === 13) { app.callEvent(); } }); } });<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> <div id="app"> <button>Enter</button> </div>Remember that if you're using Single File Components, the instance is exposed by the
thiskeyword, which can be used to call component methods inside the desired handler:export default { methods: { callEvent() { console.log('Event called') } }, mounted() { window.addEventListener('keyup', event => { if (event.keyCode === 13) { this.callEvent() } }) } }讨论(0) -
Buttons don't have keyup event on them. Even when you have focus on the button, and hit enter, it will be considered a click event, instead of
keyup.enter.Try binding the event to an input and it'd work.
Alternatively, you could use jQuery (or Plain JS) to bind for keydown event on the
bodyelement, and trigger the Vue method by callingapp.callEvent().var app = new Vue({ el: "#app", methods: { callEvent() { console.log("Event called"); } }, mounted() { var self = this; window.addEventListener('keyup', function(event) { if (event.keyCode === 13) { self.callEvent(); } }); } });<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> <div id="app"> <template> <div> <button @click="callEvent"> Click </button> </div> <input type="text" @keyup.enter="callEvent" /> </template> </div>Updated to use
mountedinstead of relying on jQuery - as per Erick Petrucelli's answer as it allows referring to the Vue component without the global variable.讨论(0)
加载中...
- 热议问题