I'm struggling to figure out how to trigger a Bootstrap 4 modal from my Vue 3 app using JavaScript. Whenever I try to launch the modal, I keep encountering this error message: $ is not defined at eval
When looking for solutions, I noticed that most answers mention avoiding multiple inclusions of jQuery within the project, but I can't determine if that's what's causing my problem.
Below is the code snippet, can anyone spot what I'm doing wrong with launching the Bootstrap modal?
Html
<!-- Modal -->
<div
class="modal fade"
id="errorModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalCenterTitle"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">
{{ modalTitle }}}
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{ modalMessage }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Javascript
<script>
export default {
methods: {
doNetworkedThings(requestHeader, profile) {
let that = this;
axios
.post(
"http://localhost:8080/endpoint",
profile,
requestHeader
)
.then(function(response) {
console.log("Success");
})
.catch(function(error) {
//show error modal
$('#errorModal').modal({ //TODO: fails on this line
keyboard: false,
backdrop: "static"
})
});
},
},
};
</script>