Javascript 在vuejs中不使用第二个模式窗口时按Escape键

我有一个多行的表，每行有一个按钮，单击按钮，一个模式窗口打开，其中包含表单元素

提交表单后，第二个窗口打开进行确认，第一个窗口关闭

下面的代码是我的示例工作流程

我的问题是

按Escape键时，第一个窗口打开时工作，但第二个窗口打开时无法关闭

<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>

---

看起来您缺少此

。IsSecondWidowOpen

，它不会在数据函数中返回。

在每个

组件上使用

键来告诉Vue不要重用DOM节点：





Vue在创建第二个模式时，正在为第一个模式重用DOM，因此从未创建第二个
keydown
事件侦听器

在DOM中添加和删除元素时，Vue有时会尝试通过重用旧的DOM节点来加快渲染速度。有时这可能会产生不必要的副作用。
键本质上指示它不要这样做。
哦，是的，但我忘了添加代码了，你能先删除你的答案吗？你能尝试添加
@keydown.esc=“hideFirstModal”
和你的第二个模式相同，看看是否有效。其次，尝试为每个模态元素添加一个制表符索引。（例如，tabindex=“0”）不，这两种情况都不适用。使用vue与纯香草js相比有一些优点和缺点，感谢您的帮助。只有优点！：）在创建指令或任何手动操作DOM的操作时，如果按顺序使用相同元素的2+，DOM重用问题很容易陷入困境。不客气，巴德
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)
    }
})