Question

31

Handle key press by function in VueJs

rated 0 times [ 35] [ 4] / answers: 1 / hits: 52099 / 6 Years ago, thu, may 17, 2018, 12:00:00

in my component I am using VueStrap's modal like this:

<template>

    <modal-window v-model="show" v-on:keyup="keyHandler($event)" @ok="submit()" @cancel="cancel()" @closed="close()" ... >

       ...

    </modal-window>

 ...

</template>

<script> 

    ...

    methods: {

       keyHandler (event) {

           console.log(event);

       }

    },...

</script>

I want handle key press when that modal is opened and ensure submit modal when enter pressed or close modal when esc pressed.

I added custom function keyHandler which is unfortunately never fired. Can you tell me how to fix code to handle key press in that function? Or when is better way how to close and submit vue strap modal I will be grateful for advice. Thank you.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kareem

Add To Favorites

Follow

Total Points: 733

Total Questions: 110

Total Answers: 102

Location: Bermuda

Member since Thu, Apr 20, 2023

1 Year ago

answered 6 Years ago trayvon · Accepted Answer

You can attach your event handler to window, that way you can receive all key events and act accordingly depending on your modal's state:

Vue.component('modal', {

  template: '<div>test modal</div>',

});



new Vue({

  el: #app,

  created() {

    window.addEventListener('keydown', (e) => {

      if (e.key == 'Escape') {

        this.showModal = !this.showModal;

      }

    });

  },

  data: {

    showModal: true

  }

})

<script src=https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js></script>

<div id=app>

  <modal v-show=showModal></modal>

</div>