Estoy tratando de ocultar una ventana emergente de arranque cuando se presiona el botón "Agregar ubicación" y cuando se llena el campo.
<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>en la sección btnAdd function else, cuando el usuario haya llenado el campo, quiero que el modal se cierre cuando se haga clic en el botón. Probé referencias, dándole al modal una referencia y agregando este código pero no funciona
this.$refs.myModal.hide()Puede agregar un v-if="showModal" en su primer div modal. Y establezca this.showModal en verdadero cuando el modal debería estar visible y configúrelo en falso cuando desee ocultar el modal this.showModal = false
Pude ocultar la ventana emergente agregando esto en la función addBtn
$('#staticBackdrop').modal('hide');