I am looking for a way to automatically hide a Bootstrap popup once the "Add Location" button is clicked and the field is filled in.
<template>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{popupTitle}}</h5>
<button type="button" @click="closeModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p><input type="text" v-model="addBinLocation"></p>
<span v-show="errorTxt" class="error">Field cannot be empty</span>
</div>
<div class="modal-footer">
<button @click="btnAdd" type="button" class="btn btn-primary">Add Location</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['popupTitle'],
data(){
return{
addBinLocation: '',
errorTxt: false,
}
},
methods:{
btnAdd(){
if(this.addBinLocation === ''){
this.errorTxt = true;
}
else{
this.$emit('addLocation', this.addBinLocation);
this.addBinLocation = ''
this.errorTxt = false;
this.closeModal();
}
},
closeModal(){
this.addBinLocation = ''
this.errorTxt = false;
}
}
}
</script>
<style scoped>
.error{
color:red
}
</style>
Within the 'btnAdd' function's else section, I aim to have the modal automatically close when the user has entered information into the field and clicks the button. I attempted using refs with the following code snippet but it did not work:
this.$refs.myModal.hide()