I have a table with multiple rows, each row has a button, on clicking the button, a modal window opens contains form element.
After submitting the form, second window opens for confirmation and first window closes.
Below code is my sample work flow.
My problem is
On Escape key press, works when the first window was opened but not able to close the second window when it was opened.
<template>
<div>
<table>
<tr>
<td>
<button @click="openFormWindow">Open form</button>
</td>
</tr>
</table>
<modal v-on-escape="hideFirstModal" v-if="isFirstWindowOpen">
<div>
<form @submit="submitFormOne">
<input type="text">
<button type="submit"></button>
</form>
</div>
</modal>
<modal v-on-escape="hideSecondModal" v-if="isSecondWindowOpen">
<p>confirmation window</p>
</modal>
</div>
</template>
<script>
export default {
data () {
return {
isFirstWindowOpen: false,
isSecondWindowOpen: false
}
}
methods: {
openFormWindow () {
// form window opens
this.isFirstWindowOpen = true
},
hideFirstModal () {
this.isFirstWindowOpen = false
},
hideSecondModal () {
this.isSecondWindowOpen = false
},
submitFormOne () {
// submit the details, let the first window close & open the second window.
this.isFirstWindowOpen = false
this.isSecondWindowOpen = true
}
}
}
</script>
vue directive on-escape
Vue.directive('on-escape', {
bind (el, binding, vnode) {
el.customEventKeydown = function (event) {
// Check if click was outside the el and his childrens
if (event.keyCode === 27) {
vnode.context[binding.expression](event)
}
}
document.body.addEventListener("keydown", el.customEventKeydown)
},
unbind (el) {
document.body.removeEventListener("keydown", el.customEventKeydown)
}
})
