成功发送电子邮件时会显示联系表格和 Toast 通知

Question

我可能在做一些愚蠢的事情，我无法做到这一点。

你能帮忙吗？

我正在使用 EmailJS 和 Toast (iZiToast) 通知在 Vue 和 Vuetify 中制作联系表。我试图在成功发布电子邮件时显示 toast 通知，但我做错了，每次单击按钮时都会显示 toast，这与联系表单中是否有数据无关。

*** 已编辑 - 为电子邮件发送失败添加了一个错误 toast，并将按钮移到了 ContactPage.vue 而不是它自己的组件中。如果电子邮件发送或失败，toast 失败且不显示成功

ContactPage.vue

<template>
  <section class="container">
    <v-card class="left-half">
      <div class="ContactForm">
        <div>
          <h1>Don't be a stranger</h1>
        </div>
        <div>
          <h2>Just say hello.</h2>
        </div>
        <div class="ContactText">
          <p>
            Don't hesitate to connect with us. We are consistently open to
            discussing new projects, creative ideas or opportunities and would
            like to make your dreams come true
          </p>
        </div>

        <form class="contact-form" @submit.prevent="sendEmail">
          <v-text-field
            v-model="FirstAndLast"
            :rules="NameRules"
            :counter="20"
            label="First & Last name"
            required
            type="text"
            name="user_name"
          ></v-text-field>

          <v-text-field
            v-model="email"
            :rules="emailRules"
            label="E-mail"
            required
            type="email"
            name="EmailAddr"
          ></v-text-field>
          <v-text-field
            v-model="Subject"
            :rules="SubjectRules"
            :counter="10"
            label="Subject"
            name="subject"
            required
          ></v-text-field>

          <v-textarea name="message" v-model="Message"></v-textarea>
          <v-btn
            type="submit"
            value="Send"
            block
            color="secondary"
            dark
            >SEND</v-btn
          >
        </form>
      </div>
    </v-card>
    <v-card class="right-half">
      <div class="Gmap">
      </div>
    </v-card>
  </section>
</template>

<script>
import emailjs, { sendForm } from "emailjs-com";

export default {
  components: {
    GoogleMap,
    // ContactButton,
  },
  data: () => ({
    valid: false,
    FirstAndLast: "",
    NameRules: [
      (v) => !!v || "Name is required",
      (v) => v.length <= 10 || "Name must be less than 10 characters",
    ],

    email: "",
    emailRules: [
      (v) => !!v || "E-mail is required",
      (v) => /.+@.+/.test(v) || "E-mail must be valid",
    ],
    ContactNumber: "",
    Subject: "",
    MessageRules: [(v) => !!v || "Last Name is required"],

    Subject: "",
    SubjectRules: [(v) => !!v || "Subject is Required"],
    notificationSystem: {
      options: {
        show: {
          theme: "dark",
          icon: "icon-person",
          position: "topCenter",
          progressBarColor: "rgb(0, 255, 184)",
        },

        success: {
          position: "bottomRight",
        },
        warning: {
          position: "bottomRight",
        },
      },
    },
  }),
  methods: {
    sendEmail: (e) => {
      emailjs
        .sendForm(
          "YOUR_SERVICE_ID",
          "YOUR_TEMPLATE_ID",
          e.target,
          "YOUR_USER_ID"
        )
        .then(
          (result) => {
            console.log("SUCCESS!", result.status, result.text);
            $toast.success(
              "Email Sent ",
              "Success!",
              notificationSystem.options.success
            );
          },
          (error) => {
            console.log("FAILED...", error);
            $toast.fail(
              "Email Not Sent ",
              "Nope!",
              notificationSystem.options.warning
            );
          },
          e.target.reset()
        );
    },
  },
};

</script>

<style scoped>
/* Pattern styles */

.container {
  display: flex;
  padding-top: 50px;
}

.left-half {
  background-color: #fbfbff !important;
  flex: 1;
  margin-right: 30px;
  padding: 10px;
}
.ContactText {
  padding-top: 20px;
}

.ContactForm {
  padding: 50px;
}
.right-half {
  background-color: #1d1d1d !important;
  flex: 1;
  margin-left: 30px;
  padding: 1px;
}
</style>

Answer 1

编辑：你有这个：

            v-on:click="
              $toast.success(
                'Email Sent ',
                'Success!',
                notificationSystem.options.success
              );
              $toast.warning(
                'Email not delivered ',
                'Fail!',
                notificationSystem.options.warning
              );

只需删除该位，toast 消息就会停止无意义地触发。

此外，您是否获得了所需的控制台输出？

成功发送电子邮件时会显示联系表格和 Toast 通知

Contact form and Toast Notification show on email successful sent

email

toast

vue.js

vuetify.js