[Vuejs]-Modal ls not firing with V-Show

by

0👍

✅

Change your ShowTwoFactoreModal function to something like this:

ShowTwoFactoreModal() {
    this.showTwoFactoreModal = true;
    $('#showTwoFactoreModal').modal('show');
}

Either that or maybe using :class bindings and appending the active class, but this is more straight. I usually do it with an eventBus, but it might be overkill for your project… if you were to do it with an event bus, you could attach an eventListener to the modal component, and attach a showModal function callback to that listener where you don’t need to set IDs you can just call it like: $(this.$el).modal('show'); … but thats another story…

👤Erubiel

0👍

Bootstrap modal is using its own js functions to handle show and hide modal. Vue v-show can only show and hide the components which you programmed its logic. But bootstrap modal is showing and hiding by appending class to modal component.
If you want to use without bootstrap.js to toggle you can use jQuery with Vue as below. (if just want show then change method .show())

//200 is duration of fade animation.
<button @click="toggleModal"></button>

function toggleModal() {
    $('#your_modal_id').fadeToggle(200)
}

If you want to use bootstrap own modal with their js then you can copy and paste modal code
here. https://getbootstrap.com/docs/4.0/components/modal/

If you want Vue v-show to handle all process then write logic to do it. If need help just ask.

👤WebMan

Leave a comment