联系表格和Toast通知显示在成功发送的电子邮件中

Question

我可能做得很愚蠢，无法做到这一点。

您能帮忙吗？

我正在Vue中制作联系表，并使用EmailJS和Toast（iZiToast）通知进行Vuetify。我试图在电子邮件已成功发布且无法正确显示时显示Toast通知，每次您单击按钮时Toast都会显示，无论联系表单中是否有数据都无关紧要。

***已编辑-为电子邮件发送失败添加了一个错误提示，并将按钮移至ContactPage.vue而不是其自己的组件。单击按钮时，失败吐司和成功吐司仍然会触发，而没有联系表单数据，并且两者都同时触发。

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
            v-on:click="
              $toast.success(
                'Email Sent ',
                'Success!',
                notificationSystem.options.success
              );
              $toast.warning(
                'Email not delivered ',
                'Fail!',
                notificationSystem.options.warning
              );
            "
            >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.success中触发sendEmail。

我不确定这是否可行，（我现在将对其进行测试，但是例如：

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.fail
            )
          },
          e.target.reset()
        );
    },