如何在VUE中关闭提交时的引导弹出框

Question

我试图隐藏一个引导弹出时的"添加位置">

<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>

在btnAdd函数else部分的中，当用户填充了字段时，我希望在单击按钮时关闭模态。我尝试refs，通过给模态一个ref和添加这个代码，但它不工作

this.$refs.myModal.hide()

Answer 1

你可以在你的第一个模态div中添加一个v-if="showModal"。当模态应该可见时将showModal设为true，当你想隐藏模态时将其设为falsethis.showModal = false

Answer 2

我可以通过在addBtn函数中添加这个来隐藏弹出窗口

$('#staticBackdrop').modal('hide');