Не удается закрыть панель навигации Vuetify с помощью клавиши Escape

Question

Я пытаюсь найти способ закрыть компонент vuetify navigation drawer , нажав клавишу escape. Для этого я попытался использовать модификатор клавиши следующим образом:

    <v-navigation-drawer
      v-model="drawer"
      color="dark"
      app
      @keydown.esc="drawer = false"
    >

Теоретически я ожидал, что это сработает, но это не так. Когда я нажимаю клавишу выхода, ничего не происходит. Есть идеи, как заставить это работать?

Для чего это стоит, вот схема кода для всего раздела панели приложений / панели навигации:

<template>
  <v-app>
    <v-app-bar color="primary" app dark flat>
      ...
      <v-app-bar-nav-icon
        @click="drawer = !drawer"
      ></v-app-bar-nav-icon>
    </v-app-bar>
    <v-navigation-drawer
      v-model="drawer"
      color="dark"
      app
      @keydown.esc="drawer = false"
    >
      ...
    </v-navigation-drawer>
  </v-app>
</template>

Answer 1

Вы не можете сделать это с ящиком, это не элемент ввода.

Вместо этого установите глобальный прослушиватель:

mounted () {
  window.addEventListener('keydown', this.keyDownHandler)
},
destroyed () {
  window.removeEventListener('keydown', this.keyDownHandler)
},
methods: {
  keyDownHandler (event) {
     if (event.code === 'Escape') {
       this.drawer = false
     }
  }
}