I am currently developing an application with Vue.js. In the login process of my application, I want to display any potential errors using a Bootstrap modal instead of the traditional alert. Is there a method to trigger the modal using JavaScript without relying on jQuery?
Thank you :)
document.getElementById("loginerror").style.display = "block";
The above code snippet utilizes jQuery, but I am looking for an alternative approach.
I attempted to use the ref method, however, it resulted in an error message stating that this.$refs.loginerror.modal is not a function.
Below is the code snippet utilizing 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">×</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>
Sample of the JavaScript code:
.catch((error) => {
document.getElementById("loginerrormsg").innerHTML = error;
this.$refs.loginerror.modal();
});