如果表单提交正确，我试图在屏幕上弹出一个模态。联系人表单按预期工作。我做错了什么？我正在使用Vue 3和Bootstrap 5
这是我的代码

<template>
  <HeaderHero
    class="backgroundImage"
    title="Contact Us"
    subtitle=""
    :backgroundImage="backgroundImage"
  />
  <div class="container">
    <div class="form col-lg-6">
      <form @submit="sendEmail">
        <div class="row">
          <label for="name">Name:</label>
          <input type="text" id="name" v-model="name" required />
        </div>
        <div class="row">
          <label for="email">Email:</label>
          <input type="email" id="email" v-model="email" required />
        </div>
        <div class="row">
          <label for="number">Phone Number:</label>
          <input id="number" v-model="number" />
        </div>
        <div class="row">
          <label for="message">Message:</label>
          <textarea id="message" v-model="message" required></textarea>
        </div>
        <button
          type="submit"
          data-bs-toggle="modal"
          data-bs-target="#exampleModal"
        >
          Send
        </button>
      </form>
    </div>

    <div v-if="showModal">
      <div
        class="modal fade"
        id="exampleModal"
        tabindex="-1"
        aria-labelledby="exampleModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">
                Message Sent Successfully
              </h5>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
          </div>
          <div class="modal-body">
            Thankyou for your message, we will be in touch as soon as possible
          </div>
          <div class="modal-footer"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import emailjs from "emailjs-com";
import HeaderHero from "../components/HeaderHero.vue";

export default {
  components: { HeaderHero },
  data() {
    return {
      backgroundImage: require("../assets/Boonah.jpg"),
      name: "",
      email: "",
      number: "",
      message: "",
      showModal: false,
    };
  },
  methods: {
    sendEmail(event) {
      event.preventDefault();
      emailjs
        .send(
          "service_685v326",
          "template_1wG4pSr",
          {
            from_email: this.email,
            name: this.name,
            email: this.email,
            number: this.number,
            message: this.message,
          },
          "7DreG1YwN4Y_f0fzK"
        )
        .then(
          (response) => {
            console.log("SUCCESS!", response.status, response.text);
            this.showModal = true;
          },
          function (error) {
            console.log("FAILED...", error);
            this.showModal = false;
          }
        );
    },
  },
};
</script>

这是我提交表单后得到的错误。表单按预期工作并发送详细信息。

Cannot read properties of undefined (reading 'backdrop')
TypeError: Cannot read properties of undefined (reading 'backdrop')
    at Modal._initializeBackDrop (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.js:2939:41)
    at new Modal (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.js:2847:29)
    at Modal.getOrCreateInstance (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.js:856:43)
    at HTMLButtonElement.eval (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.js:3162:24)
    at HTMLDocument.handler (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.js:416:21)