I am trying to hide a bootstrap popup when the "Add Location" button is pressed and when the field is filled.
<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;
}
},
closeModal(){
this.addBinLocation = ''
this.errorTxt = false;
}
}
}
</script>
<style scoped>
.error{
color:red
}
</style>
in the btnAdd function else section, when the user has filled the field, I want the modal to close when the button is clicked. I tried refs, by giving the modal a ref and adding this code but it is not working
this.$refs.myModal.hide()
CodePudding user response:
You could add a v-if="showModal"
in your first modal div. And set this.showModal to true when the modal should be visible and set it to false when you want to hide the modal this.showModal = false
CodePudding user response:
I have able to hide the popup by adding this in the addBtn function
$('#staticBackdrop').modal('hide');