vue.js中未显示模态

Question

所以我有一个问题，我制作了一个具有Vanilla js中各种功能的地图应用程序。 我现在正在尝试将所有这些代码转换为vue.js，这是一个缓慢的过程。 单击“添加步骤”按钮时，我有一个要弹出的模态，但不是。 我已经阅读了文档并查看了示例，但无法弄清楚。

正如我提到的那样，我已经尝试了在stackoverflow和其他地方找到的各种示例。

我知道解决方案的确可能非常简单，但是我遇到了麻烦，这种模式不会显示。 有技巧或窍门吗？ 使用vue时需要考虑的事情？ 这是我整个项目的小窍门， https://jsfiddle.net/8Lmjrhgs/ 。 非常感谢您的宝贵时间！

这就是我的vanilla.js模式的样子

let btn = document.getElementById("myBtn");
let span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
    modal.style.display = "block";
};
span.onclick = function() {
    modal.style.display = "none";
};
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
};```

Answer 1

注意：data（）{return {...

data()  {
return {
showModal: false,
    isEditing: false,
    user: {
        mapTitle: 'Add a title to your map',
        mapDescription: 'Add a description to your map',
    },
    steps: [{title: "", description: ""}],
    step: {title: "", description: ""}
}

},

不要将您的v-show放到过渡组上，也不要放到直接子级上，点击实际上也一样，我也不会切换“ Close modal”的值，因为您不选择“ Open modal”最少的id使这些句柄以相同的方式处理。

<transition name="modal" :modalData='customData' @close='showModal = !showModal'>
        <div class="modal-mask" v-show="showModal">

我相信这里的主要问题是您创建组件的方式，在这种特定情况下，这是多余的，因为所有代码都已经存在了（但是您的实际代码可能实际上是在导入它，所以我不能肯定地说）。脚本标记退出了模式。

https://jsfiddle.net/1kv24wyr/1/