Модал не отображается в vue.js - PullRequest
Новая
       21

Модал не отображается в vue.js

0 голосов
/ 03 мая 2019

Итак, у меня есть проблема, я сделал приложение карты с различными функциями в 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";
    }
};```

1 Ответ

1 голос
/ 03 мая 2019

Примечание: 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-шоу в группу переходов, поместите его в непосредственный дочерний элемент, то же самое на самом деле относится и к щелчку, я бы также не стал переключать значение для «Закрыть модальное», поскольку вы не используете «Открыть». модальные "по крайней мере, идентификатор сделать те же обработать. 

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

Я полагаю, что главной проблемой здесь было то, как вы создали компонент, который в данном конкретном случае является избыточным, поскольку весь код в любом случае есть (но ваш реальный код может фактически импортировать его, поэтому я не могу сказать наверняка ) Удаление тегов скрипта вывело модал.

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

...