vuejs3 - 函数运行vue3 composition api后如何在bootstrap上关闭模式

Question

我正在运行一个 vue3 网络应用程序，在使用 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. 使用template refs在 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>