Handle key press by function in VueJs

Question

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.

score 36 · Accepted Answer · answered May 17 '18 at 16:06

36

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>

answered May 17 '18 at 16:06

Amr Noman

2,597
13
24

1

I am sorry but I find out right now that enter and esc are not handled, just when I am in input ... other keys works every time, do you have idea what should be problem? – Denis Stephanov May 17 '18 at 16:28
maybe you're catching the event on your input and stopping propagation.. – Amr Noman May 17 '18 at 16:33
1

or maybe you're using `keypress`, try using `keydown` instead – Amr Noman May 17 '18 at 16:39
this worked but I had to add the event listener on 'mounted' not 'created'. The window object did not exist yet on 'created' in my project – Jar Jun 03 '20 at 18:47
Alternatively wrap the window.addEvent.... in $nextThick – Neon Emmanuel Oct 04 '21 at 17:15

score 9 · Answer 2 · answered Aug 31 '20 at 20:46

9

easiest way

<input v-on:keyup.13="whatkey()" type="text"> <br>

looks for if the enter key is pressed then fires a method called whatkey.

answered Aug 31 '20 at 20:46

roblem

527
5
8

score 2 · Answer 3 · edited Aug 31 '20 at 21:11

Alternatively, you may want to consider using the v-hotkey directive for key input in Vue (docs, github). This will keep your code relatively clean and simple if you must consider several different key inputs.

1. Install it:

npm i --save v-hotkey

Have Vue 'use' it:

import VueHotkey from "v-hotkey"; Vue.use(VueHotkey);

3. Apply it to your Vue components, like so:

<template>
    <modal-window ... v-hotkey="keymap">
       ...
    </modal-window>
</template>
<script>
  ...
  data() {
    return {
      showModal: false
    };
  },
  computed: {
    keymap() {
      return {
        "esc": this.toggleModal
      };
    }
  },
  methods: {
    toggleModal() {
      this.showModal = !this.showModal;
    }
  }
</script>

Handle key press by function in VueJs

3 Answers3

Linked

Related