Menu
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.
533
Alternatively, you may want to consider using the v-hotkeydirective 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.
You can refer to event modifiers in vuejs to prevent form submission on enter key. It is a very common need to call event.preventDefault() or event.stopPropagation() inside event handlers.
These functions are known as event handlers. Vue is no different. It has an event handling mechanism that allows you to catch and handle events from within each independent component file. Events can appear either as user input or we can manually create them in the code and emit them when needed.
@keyup.enter.native="onEnter". 13 is the keycode of enter. For @ key event, the keycode is 50. So you can use @keyup.50. Is there a site that lists the mapping between characters and numbers (like 50 and @)? I couldn't find it in the Vue documentation.
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>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.
22
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
