Listening for keypresses in a vue template

Using inertia/vue, I'm not clear how to listen for key presses for the rendered vue that is not a form.

It looks like I want to use the @keyup or @keydown directive, but I'm not sure where to put that to listen for key presses for the vue.

I've tried using @keypress or @keydown attached to a div in the template, but I doesn't seem to work. How can I listen for keypresses on a template that doesn't have a form?

Thanks

AungHtetPaing__

3 years ago

Best Answer

Level 22

@max100 You need to add event listener to vue component like this

created() {
	window.addEventListener('keypress', event => {
		if (event.key === '/') {
            event.preventDefault()
            this.openModal()
       }
   })
}

You can also see this thread: https://laracasts.com/discuss/channels/vue/vuejs-listen-for-key-events-on-div

Max100

3 years ago

Level 6

Great, I'll give that a try! Thanks for your reply!

Please or to participate in this conversation.