Vuejs : how to hide a component <div> on keyup escape? - vue.js

Question

Using Vue 2.5 I'm trying to hide a component if the esc key is pressed.
Inspired by the documentation on key modifiers, I wrote the following code but with no effect (for the moment I'm not hiding, just displaying a message):
Vue.component('my-component', {
data: function () {
return {isVisible:true,
message:'no key pressed'}
},
template: '<div v-on:keyup.esc="myMethod" v-if="isVisible">This is my component<div>{{message}}</div>',
methods:{
myMethod : function(){
this.message = 'esc key pressed'
//My hiding action...
}
}
})
new Vue({
el: '#app',
data: {
}
})
Fiddle
EDIT : looks like the issue is related to the fact I'm trying to implement this on a regular div, not on an input as it's usually used

Answer 1

I think you should add
created: function() {
document.addEventListener('keyup', this.myMethod);
}
And in your method:
myMethod(event) {
if (event.keyCode === 27) {
this.message = 'esc key pressed'
console.log('esc key pressed');
}
}
Here is working example: https://jsfiddle.net/uzxugzo7/9/
Also, don't forget to destroy it, to prevent memory leaks
destroyed: function() {
document.removeEventListener('keyup', this.myMethod);
}

Answer 2

To make static elements accessible to keyboard event use tabindex
<div v-on:keyup.esc="myMethod" tabindex="0" v-if="isVisible">This is my component<div>{{message}}</div>

Answer 3

I would use something like
mounted() {
window.addEventListener('keyup', e => {
if (e.keyCode === 27) {
* Note keyCode 27 is ESC
// do stuff here
}
})
}

Answer 4

Assuming you want to detect whenever the escape key is pressed anywhere inside the webpage, add an eventlistener to your application (not components) when your application is mounted (not created). For demonstration's purpose, I made use of event bus to show how the components receives the escape-key-pressed event.
(To test this snippet, click the output window first)
Vue.component('custom-component', {
template: `
<div>
<div v-show="show">
Hide when Escape Key is pressed.
</div>
<button v-on:click="reset()">Reset</button>
</div>`,
data() {
return {
show: true
}
},
created() {
window.eventBus.$on('escape-key-pressed', (val) => {
this.show = false
alert("escape key is pressed")
})
},
methods: {
reset() { this.show = true }
}
});
window.eventBus = new Vue({})
const app = new Vue({
el: "#app",
mounted() {
window.addEventListener('keyup', this.handler);
},
destroyed() {
window.removeEventListener('keyup', this.handler)
},
methods: {
handler() {
// If escape key is pressed...
if (event.keyCode == 27) {
window.eventBus.$emit('escape-key-pressed', true);
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
Example
<custom-component></custom-component>
</div>