Categories
Vue Answers

How to close dialog when ESC key is pressed with Vuetify and Vue.js?

Spread the love

Sometimes, we want to close dialog when ESC key is pressed with Vuetify and Vue.js.

In this article, we’ll look at how to close dialog when ESC key is pressed with Vuetify and Vue.js.

How to close dialog when ESC key is pressed with Vuetify and Vue.js?

To close dialog when ESC key is pressed with Vuetify and Vue.js, we can add a keydown event listener to the dialog.

For instance, we write

<template>
  <div>
    <v-dialog v-model="dialog" @keydown.esc="dialog = false"></v-dialog>
  </div>
</template>

<script>
export default {
  //...
  data: () => ({
    dialog: false,
  }),
  //...
};
</script>

to listen for esc key presses with the @keydown.esc directive.

And if the event is triggered, we set dialog to false to close the dialog.

We set v-model to dialog so that the dialog is open only when dialog is true.

Conclusion

To close dialog when ESC key is pressed with Vuetify and Vue.js, we can add a keydown event listener to the dialog.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published.