Vue3 + Bootstrap5表单提交后模态框不显示且报错问题求助

问题原因 #

1. 提交按钮上的data-bs-toggle="modal"和data-bs-target="#exampleModal"会让Bootstrap在点击按钮时立即尝试触发模态框，但此时showModal为false，模态框DOM还未渲染，导致Bootstrap找不到目标元素抛出Cannot read properties of undefined (reading 'backdrop')错误。
2. 模态框DOM结构错误：modal-body和modal-footer被放在了modal-content外部，不符合Bootstrap模态框的结构规范。
3. 邮件发送失败的回调函数使用了普通函数，导致this指向错误，无法正确修改showModal状态。

修复步骤 #

• 移除提交按钮上的data-bs-toggle和data-bs-target属性，避免Bootstrap自动触发模态框。
• 调整模态框DOM结构，将modal-body和modal-footer移入modal-content内部。
• 使用箭头函数作为邮件发送失败的回调，保证this指向Vue实例。
• 在邮件发送成功后，手动初始化并显示Bootstrap模态框（因为Vue渲染DOM后需要让Bootstrap识别该元素）。

修改后的完整代码 #

<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">
          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>
            <!-- 修正结构：将body和footer移入modal-content -->
            <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>
  </div>
</template>

<script>
import emailjs from "emailjs-com";
import HeaderHero from "../components/HeaderHero.vue";
// 导入Bootstrap的Modal类
import { Modal } from "bootstrap";

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;
            // 等待DOM更新后初始化并显示模态框
            this.$nextTick(() => {
              const modalElement = document.getElementById("exampleModal");
              const modal = new Modal(modalElement);
              modal.show();
            });
          },
          // 使用箭头函数保证this指向
          (error) => {
            console.log("FAILED...", error);
            this.showModal = false;
          }
        );
    },
  },
};
</script>

内容的提问来源于stack exchange，提问作者Lough