Закрытие окна кнопкой отмена на Vue.js?

Question

[Andrej Sharapov]

Подскажите, как реализовать аналог события @click="$emit('close')" при помощи кнопки esc на клавиатуре?

В данном случае, модалка вью-компонент.

@keyup.esc="('close')"
@keyup.esc="$emit('close')" tabindex="0"
не срабатывает

Answer 1

[Степан Крапивин]

Чтобы элемент генерировал событие @keyup нужно чтобы элемент был в фокусе.

Вот пример как это работает
https://codepen.io/xevin/pen/BaBJWve?editors=1010

Answer 2

[Hyuugo]

Можно реализовать через event listener:

mounted: function () {
  document.addEventListener("keydown", (e) => {
    if (this.show && e.keyCode == 27) {
      this.$emit("close");
    }
  });
}