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

Question

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

你能帮忙吗？

我正在 Vue 和 Vuetify 中制作一个联系表格，其中包含 EmailJS 和 Toast (iZiToast( 通知。我正在尝试在成功发布电子邮件时显示 Toast 通知，但我无法正确处理，每次单击按钮时都会显示 toast，无论联系表单中是否有数据都没有关系。

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

联系方式页面

<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 消息应该停止毫无意义的触发。

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