时间戳

首页 > 解决方案 > 模式未在 vue.js 中显示

javascript - 模式未在 vue.js 中显示

问题描述

所以我有一个问题，我在 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";
    }
};```

标签： javascripthtmlcssvue.jsweb-deployment

解决方案

注意：数据（）{返回{...

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 放在过渡组上，将其放在直接子级上，实际上点击也是如此，我也不会切换“关闭模式”的值，因为您不会在“打开模式”至少 id 使这些处理方式相同。

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

我认为这里的主要问题是您创建组件的方式，在这种特定情况下是多余的，因为无论如何所有代码都在那里（但您的真实代码可能实际上正在导入它，所以我不能肯定地说）删除您的脚本标签得到了模态。

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

推荐阅读