Contact form and Toast Notification show on email successful sent

Question

I am probably doing something silly that I cant get this right.

Could you please assist?

I am making a contact form in Vue and Vuetify with EmailJS and a Toast (iZiToast) notification. I am trying to make the toast notification show when the email has been successfully posted and I can't get it right, the toast shows every time you click on the button doesn't matter if there is data in the contact form or not.

***Edited - added an error toast for email send failure and moved the button into ContactPage.vue instead of its own component. The toast fail and success doesnt show if email sends or fails

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

EDIT: You have this:

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

Just remove that bit and the toast messages should stop triggering without meaning.

Also, do you get the desired console output?