如何在函数运行vue3compositeAPI后关闭bootstrap上的modal

Question

我正在运行一个vue3 web应用程序，在使用npm install bootstrap安装后，bootstrap 5运行得很好。

我正在运行一个运行良好的函数，但我希望在函数运行后关闭模态。以下是我的代码：

<template>    
<p data-bs-toggle="modal" data-bs-target="#staticBackdrop3">
<a class="btn btn-primary my-2">Upload new property</a>
</p>
<!-- Modal for property upload -->
<div class="modal fade" id="staticBackdrop3" 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" id="staticBackdropLabel">Add property to the list</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<div class="modal-body">
<form @submit.prevent="saveToDatabase">
<label> Property Name</label>
<input
type="text"
v-model="name"
required
placeholder="e.g. my house"
/>
<label>Area</label>
<select v-model="area" required>
<option value="" selected disabled="">Select an option</option>
<option value="Island">Lagos Island</option>
<option value="Mainland">Lagos Mainland</option>
</select>
<label>Number of Beds</label>
<input type="number" v-model="beds" required placeholder="e.g. 4" />
<label>Price Per Night (NGN)</label>
<input
type="text"
v-model="price"
required
placeholder="e.g. 120,000"
/>

<div class="progressBtns">

<button class="ui button fluid blue" @click="saveToDatabase">
Save
</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

</div>
</div>
</div>
</div>
</template>
<script>
import { ref } from "vue";
import { projectDatabase, projectAuth } from "../../firebase/config";
export default {
setup() {

const name = ref("");
const beds = ref(0);
const area = ref("");
const price = ref("");


const saveToDatabase = async () => {

var send = Ref.push({
name: name.value,
area: area.value,
bed: beds.value,
price: price.value,

});
send;
Ref.child(send.key).child("id").set(send.key);
// close modal

};

return {

name,
area,
price,
beds,

saveToDatabase,

};
},
};
</script>

下面是我的main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { projectAuth } from './firebase/config'
import "bootstrap/dist/css/bootstrap.css";
import 'semantic-ui-css/semantic.min.css'
import './assets/main.css'
let app
projectAuth.onAuthStateChanged(()=>{
if(!app){
app =   createApp(App).use(router).mount('#app')
}
})
import "bootstrap/dist/js/bootstrap.js"

有没有一种方法可以在saveToDatabase函数运行后以编程方式关闭模态？

Answer 1

1. 从DOM获取模态实例：modal.getInstance((
2. 使用模板引用与Vue中的DOM进行交互

一般示例：

<script>
import { Modal } from 'bootstrap';
import { ref } from 'vue'
export default {
setup() {
const modalRef = ref(null);
const closeModal = () => Modal.getInstance(modalRef.value)?.hide();
return { modalRef, closeModal }
}
}
</script>
<template>
<p>...</p>
<div ref="modalRef" class="modal fade" id="staticBackdrop3">
...
</div>
</template>