Vue.js listen for Key Events on div

Div supports event attributes, according to w3schools: http://www.w3schools.com/tags/tag_div.asp . I am not one hundred percent sure how it works exactly but I would assume it would work exactly like using it on input.

Don't think Vue supports this. Global keypress events can be handled by attaching listeners after the component is created

new Vue({
    created: function () {
            window.addEventListener('keyup', this.myMethod())
    },
    methods: {
        myMethod: function () {
            // stuff
        }
    }
    ...
});

Hi

how to detect what key was pressed? using this:

        myMethod: function (event) {
            console.log('key pressed: ' + event.which)
        }

does not work, it produces:

Error in mounted hook: "TypeError: Cannot read property 'which' of undefined"

@maxnb It's due to an error in @tykus's answer. The addEventListener method takes a function as a second argument, not it's result. Simply remove the parentheses:

new Vue({
    created: function () {
            window.addEventListener('keyup', this.myMethod)
    },
    methods: {
        myMethod: function () {
            // stuff
        }
    }
    ...
});

div is not focusable element by default, you can make it focusable by tabindex attribute set it to 0. Once you make it focusable, you can focus on div element. And, when you have focus on element, all key events will be triggered.

<div @keyup.space="action" tabindex="0">
     ...
<\div>