Level 47
use @keydown together
and these dirctives can bind with key as
@keydown.enter="doSomething"means when enter was pressed
you can find more searching the web
Dec 11, 2022
4
Level 6
Keyboard event listener
Using Laravel Breeze/Vue with Intertia. I have an index vue and I want to listen for various keypresses to perform certain tasks. There is an input element used for a search field, but I want to pick up keypresses whether the search field is selected or not.
I had set an eventlistener to the window like this: window.addEventListener('keydown', event => { } );
That worked perfectly ... except it was intercepting ALL keypresses, including on the edit vue, so the edit form stopped working.
I'd like to implement that functionality, but limited only to the particular Index.vue, so when the vue changes, the keypresses are no longer intercepted. I tried a few approaches, such as @keyup on a div, but can't get it working.
How can I add an keyboard eventlistener to a vue to pick up various keypresses?
Level 6
@MaverickChan Thanks for your reply. I have tried @keydown, but it may depend where I use it. I'll explore this further. Thanks
Level 22
@max100 I think you need to remove window event listener when index component is unmounted. You can see breeze dropdown component there is onMounted and onUnmounted hook.
Level 6
@AungHtetPaing__ Thank you for your reply, that is exactly what I needed! I used the approach in the breeze dropdown and was able to combine that with the other code from before and now everything is working great! Thanks again for your help!
Please or to participate in this conversation.