[Vuejs]-Modal won't work in Vue / Firebase App because '$' is not defined

by

0👍

You are trying to open your modal using jQuery.

 $('#myModal').modal('show')

Check if jQuery library is loaded. Here are the jQuery CDNs

0👍

You are using bootstrap so you can use

this.$bvModal.show("modal-id");

to open your modal. (This might depend on your Bootstrap version and might be explicit for bootstrap-vue)

Another way would be

this.$refs["modal-ref"].show();

0👍

I don’t recommend to use JQuery $ sign to access the elements so,
As official document aso suggests that

Note: It is recommended to use the this.$bvModal.show() and this.$bvModal.hide() methods (mentioned in the previous section) instead of using $ref methods.

You can Use,
this.$bvModal.show() to show and
this.$bvModal.hide()hide the modal

Also, this method too applicable

this.$refs['my-modal'].show()
this.$refs['my-modal'].hide()

Leave a comment