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

    }

};```