VueJS activate boostrap modal from Javascript without the use of jQuery

user_6313037 0
Viewed 218

I am working on an application using vuejs. When a user logins to my application, i would like to show an error (if any) using bootstrap modal instead of the old fashion alert. Is there a way to "pop" the modal from javascript without the use of jQuery?

Thank you :)

$("#loginerror").modal();

The code above uses jQuery but I do not want to use that.

I have tried using the ref method but it shows an error saying this.$refs.loginerror.modal is not a function

Below is my code for the ref method:

  <!-- Modal -->
  <div ref="loginerror" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Login Error</h4>
        </div>
        <div class="modal-body">
          <p id = "loginerrormsg"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

snippets of Javascript code

.catch((error) => {
    document.getElementById("loginerrormsg").innerHTML = error;
    this.$refs.loginerror.modal();
});
bootstrap-4 vue.js javascript
3 Answers

Since you are using Vuejs you should use refs, on your modal in the template set your reference for example:

<div ref="myModal">
</div>

and in your code you can activate it as follows:

this.$refs.myModal.modal();

This is the best way to access the DOM in vue

user_136615570

according to bootstrap source code, this is how to hide modal.

  _hideModal() {
    this._element.style.display = 'none'
    this._element.setAttribute('aria-hidden', true)
    this._element.removeAttribute('aria-modal')
    this._element.removeAttribute('role')
    this._isTransitioning = false
    this._showBackdrop(() => {
      $(document.body).removeClass(CLASS_NAME_OPEN)
      this._resetAdjustments()
      this._resetScrollbar()
      $(this._element).trigger(EVENT_HIDDEN)
    })
  }

it will change style display, aria-hidden, class name, and other stuff.

here is a simple reimplementation. may not work properly. but it does show and hide modal.

const toggleModal = (modal) => {
  if (modal.classList.contains("show")) {
    modal.classList.remove("show");
    modal.style.display = "none";
    modal.setAttribute("aria-hidden", "true");
  } else {
    modal.classList.add("show");
    modal.style.display = "block";
    modal.setAttribute("aria-hidden", "false");
  }
}
user_109405440

Bootstrap 4:
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins.

So Bootstrap 4 required jQuery as dependency. If you still don't want to use jQuery in your application, you can migrate to Bootstrap 5.

Bootstrap 5 dropped jQuery dependency and is not required any more.

For more details on Bootstrap 5 you can visit: https://getbootstrap.com/docs/5.0/getting-started/javascript/

For more details on Bootstrap 4 you can visit: https://getbootstrap.com/docs/4.1/getting-started/introduction/

user_75076960
Related