How to close modal window with Esc?

Question

Vue.js

There is a modal window template:

template: '\
  <div class = "alert"
    <button id = "x-button" @click="close">\	//  По клику на кнопке работает: модальное окно закрывается
    @keypress.enter = "close"\			//  А вот с клавиатуры закрытие не работает
    @keypress.esc = "close">\
    <slot>...</slot>\
  </div>\
';

How to make a window close by pressing Esc or Enter? Probably it is necessary not so handlers to broadcast. How will be correct?

Answer 1

Add listeners to the component and do some processing on them:

mounted() {
        window.addEventListener('keyup', this.keyup)
    },
destroyed() {
        window.removeEventListener('keyup', this.keyup)
    }

Answer 2

template: '\
  <div class = "alert" 
                @keypress.enter = "close"\
    @keypress.esc = "close">\

    <button id = "x-button" @click="close">\

    <slot>...</slot>\
  </div>\
';