javascript - Vue.js bulma 模式未显示

Question

我想在单击链接时打开模式:

 <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 值为 true。

模态使用bulma.css。 奇怪的是，我在同一个组件上有另一个模式，这是我在组件使用 bootstrap.css 时编写的。该模式工作得很好。

我想知道这里出了什么问题？又该如何解决呢？

Answer 1

根据 bulma.css 文档:

To activate the modal, just add the is-active modifier on the .modal container

所以你可以像这样使用类绑定(bind):

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