Hello I'm looking for a way to create listener in vue like this:

document.addEventListener('keydown', function(event){
  if(event.key === "Escape"){       
  console.log('hello esc ');
 }
});

I need to change value of "varr" in

data(){
 return{
  varr: value
 }
}

any time when user press esc btn. But it might be used in other casses. Please help.

Hello I'm looking for a way to create listener in vue like this:

document.addEventListener('keydown', function(event){
  if(event.key === "Escape"){       
  console.log('hello esc ');
 }
});

I need to change value of "varr" in

data(){
 return{
  varr: value
 }
}

any time when user press esc btn. But it might be used in other casses. Please help.

• javascript
• vue.js
• vuejs3

2 Answers 2

Without knowing the scope of your Vue model/ponent, the easiest suggestion would be to use the .mounted() on your top-level Vue model…

Vue 2/Vue 3 Options API

// index.js
// in this example, the event handler is a Vue method

const vueModel = new Vue( {
  …
  methods:{
    …
    onKeydown( event ) {
      if(event.key === "Escape"){       
        console.log('hello esc ');
        this.varr = "new value";
      }
    },
    …
  },
  mounted() {
    document.addEventListener( "keydown", this.onKeydown );
  },
  …
} );

NOTE: This would be different if you're using Vue 3's Composition API. In that case, you'd want to set up your listener in either the setup() or onMounted() hook — depending on what your event handler affects and|or where you define the handler method.

You can use listener with modifier @keyup.esc:

const app = Vue.createApp({
  data() {
    return {
      varr: false
    }
  },
  methods: {
    handleEsc() {
      console.log('hello esc ')
      this.varr = !this.varr
    }
  },
  mounted() {
    this.$refs.div.focus()
  }
})
app.mount('#demo')

<script src="https://unpkg./vue@3/dist/vue.global.prod.js"></script>
<div id="demo" >
  <div @keyup.esc="handleEsc" tabindex="0" ref="div">
    <p>press esc</p>
    <p>varr: {{ varr }}</p>
  </div>
</div>