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.
-
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"); } } });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(); } }); } });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() } }) } }
加载中...
- 热议问题