When a link is clicked, I want to trigger the opening of a modal:
<a @click="showEditModalFunc()" href="#">Edit Post</a>
The function itself:
showEditModalFunc() {
console.log('showEditModal value is' , this.showEditModal);
this.showEditModal=!this.showEditModal;
},
This is the markup for the modal:
<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>
Although it seems simple, the modal doesn't appear when expected!
No errors are reported and the console shows showEditModal value is true.
The modal design relies on bulma.css.
Interestingly, another modal within the same component that was created with bootstrap.css works perfectly.
I'm puzzled by what could be causing this issue. Any suggestions on how to troubleshoot and resolve it?