Модальное окно в VUE.JS?

Question

[Александр]

Здравствуйте, хочу переписать модальное окно под vue.js
До этого я пользовался таким кодом.

if ($('.modal-trigger').length) {
  $('.modal-trigger').on('click', function () {
    var modalID = $(this).attr('data-modal')
    $('#' + modalID).toggleClass('is-active')
  })

  $('.modal-close, .close-modal').on('click', function () {
    $('.modal.is-active').removeClass('is-active')
  })
}

И я его хочу переписать под VUE.js. Пробовал переписать несколькими способами но не чего не получилось (

Answer 1

[Дима Паутов]

Пахнет bootstrap!!!
Так может не городить свои костыли и использовать bootstrap под vue??
https://bootstrap-vue.js.org/

Comments

[Александр]

Я хотел его использовать, но у меня уже готовый шаблон, я накинул на vue, настроил роутер. Но мне нужно сделать механизм где будет при нажатии на кнопку добавляться класс"is-active" в div элемент. И чтобы я не плодил код нужно как то это сократить ....

Answer 2

[Ярослав Чинаски]

Создаёшь переменную - isActive, присваешь ей false. Создаёшь метод, где в нем указываешь isActive True. Вешаешь метод на клик кнопке что вызывает модалку, в общий блок модалки пишешь :class="isActive". Должно работать)

Comments

[Александр]

я так и сделал, но проблема в том что если я кливаю на любой элемент страницы то оно не закрывается.

[Александр]

modalTrigger: function () {
      if (this.isTrigger === false) {
        this.isTrigger = true
      } else {
        this.isTrigger = false
      }
    },