CODEWITHSUNDEEP
jqueryvue.jsbootstrap-4bootstrap-modal
Angelo Joseph Salvador
Angelo Joseph Salvador

Reputation: 352

Bootstrap modals does not work anymore when integrated with Vue.js

My colleague recently integrated Vue.js with our code that still uses jQuery in many parts of it. The problem is that all of the modals in our application stopped showing if we tried to use JS in showing it.

The confusing thing is that the modal elements are outside of the #app that is being used by the Vue.js

The $('#modalId').modal(), $('#modalId').modal('show') and $('#modalId').modal({show}) does not show the modal anymore.

But if I chose to try to make it work by adding the modal properties to the HTML data-toggle="modal" data-target="#modalId", it works.

The other problem is that even there's a problem, console logging doesn't return anything.

enter image description here

The fiddle clearly demonstrates this problem: JSFiddle

Why it is not working? -_-

1st EDIT:

There is an answer submitted by @ittus and thanks to him, but it still doesn't work on our project. I revised the JSFiddle according to his Fiddle and it now works fine, but when I applied it on our project code, it still doesn't work at all. The error only appeared after Vue.js has been introduced to our codebase.

Upvotes: 0

Views: 138

Answers (1)

ittus
ittus

Reputation: 22403

In Boostrap 4 modal document, it said that we need to use 

$('#modalId').modal({show: true})

instead of 

$('#modalId').show();

You can checkout demo here.

Upvotes: 1

Related Questions