當按下“添加位置”按鈕和填充該欄位時，我試圖隱藏引導彈出視窗。
<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()
uj5u.com熱心網友回復：
您可以v-if="showModal"在第一個模態 div 中添加一個。并在模態應該可見時將 this.showModal 設定為 true 并在要隱藏模態時將其設定為 falsethis.showModal = false
uj5u.com熱心網友回復：
我可以通過在 addBtn 函式中添加它來隱藏彈出視窗
$('#staticBackdrop').modal('hide');
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/332937.html
標籤：javascript Vue.js