CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
Moshe
Moshe

Reputation: 6997

Can't Close Vuetify Navigation Drawer with Escape Key

I am trying to find a way to close the vuetify navigation drawer component by clicking on the escape key. To do so, I tried using a key modifier as follows:

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

Theoretically, I would expect this to work, but it does not. Nothing happens when I click on the escape key. Any idea how to get this to work?

For what it is worth, here is an outline of the code for the entire app-bar/navigation bar section:

<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>

Upvotes: 3

Views: 1111

Answers (1)

AlekseyHoffman
AlekseyHoffman

Reputation: 2694

You cannot do that with a drawer, it's not an input element.

Set up a global listener instead:

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

Upvotes: 4

Related Questions