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

Question

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.

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

How do we know what's wrong in your project if we can not see the code? — Andrew Vasylchuk
– Andrew Vasylchuk, Commented Aug 18, 2019 at 9:36

Andrew Vasylchuk · Accepted Answer · 2019-08-18 09:36:56Z

1

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.

edited Aug 18, 2019 at 9:36

Andrew Vasylchuk

4,7792 gold badges14 silver badges31 bronze badges

answered Aug 17, 2019 at 7:23

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Angelo Joseph Salvador Over a year ago

Thanks ittus, but sorry, it still doesn't work. I already revised my question and I included your Fiddle in it. Thanks a lot :)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related