Vue.js bulma модальный не отображается - PullRequest
Новая
       8

Vue.js bulma модальный не отображается

0 голосов
/ 22 января 2019

Я бы хотел открыть модальное окно при нажатии на ссылку: 

 <a @click="showEditModalFunc()" href="#">Edit Post</a>

Метод: 

  showEditModalFunc() {
    console.log('showEditModal value is' , this.showEditModal);
     this.showEditModal=!this.showEditModal;
  },

Сам модал: 

<div v-if="showEditModal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <!-- Any other Bulma elements you want -->
    Lorem, ipsum dolor sit amet  
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

Это должно быть просто, но модал не отображается!

Я тоже не получаю никакой ошибки. И я вижу в консоли showEditModal value is true.

Модал использует bulma.css. Странно, у меня есть другой модал на том же компоненте, который я написал, когда компонент использовал bootstrap.css. Этот модальный работает просто отлично.

Мне интересно, что здесь может быть не так? И как это исправить?

1 Ответ

0 голосов
/ 22 января 2019

Согласно документации bulma.css:

Чтобы активировать модальный режим, просто добавьте модификатор is-active в контейнер .modal

Таким образом, вы можете использовать привязку класса следующим образом: 

<div v-bind:class="{ 'is-active': showEditModal }" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <!-- Any other Bulma elements you want -->
    Lorem, ipsum dolor sit amet  
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>
...