191
rated 0 times
[
196]
[
5]
/ answers: 1 / hits: 14947
/ 4 Years ago, wed, october 7, 2020, 12:00:00
Im getting Error in v-on handler: "TypeError: this.$refs.EmailMessage.validate is not a function on my form when I click on send in console as well as this.$refs.EmailMessage.validate is not a function.
I created a Mapactions where I commit the Payload to the emailjs server
I've tested $refs somewhere else and it does the same thing. could it be that Vuejs has a bug? or am I doing something silly?
My form in my Contact page
<v-form ref="EmailMessage" v-model="valid" lazy-validation>
<v-text-field
solo
:rules="[required]"
v-model="fd.name"
label=" Name & Surname"
name="nameSurname"
type="text"
required
></v-text-field>
<v-text-field
solo
:rules="emailRules"
v-model="fd.email"
label="E-mail address"
name="emailAddress"
required
></v-text-field>
<v-textarea
solo
v-model="fd.Message"
:rules="[required]"
label="Message"
name="Message"
required
></v-textarea>
<p class="text-right red--text ma-0 py-3" v-if="emailError">
{{ emailError }}
</p>
<v-btn
color="#212529"
dark
@click="validate()"
:loading="loading"
:disabled="!valid"
block
>SEND</v-btn
>
</v-form>
My method handling the send and reset of my contact form
<script>
import { mapState } from "vuex";
import { mapActions } from "vuex";
import emailjs from "emailjs-com";
export default {
data: () => ({
emailError: null,
valid: true,
loading: false,
required: (v) => !!v || "This field is required",
emailRules: [
(v) => !!v || "E-mail is required",
(v) => /.+@.+..+/.test(v) || "E-mail must be valid",
],
///////////
fd: {
name: process.env.NODE_ENV == "development" ? "Test name" : null,
email: process.env.NODE_ENV == "development" ? "[email protected]" : null,
Message: process.env.NODE_ENV == "development" ? "Hello World" : null,
},
}),
methods: {
...mapActions(["sendMail"]),
validate() {
if (this.$refs[`EmailMessage`].validate()) {
this.loading = true;
emailjs
.send(
"gmail_service_id",
"ContactForm",
this.fd,
"userIDhere"
)
.then((result) => {
console.log("SUCCESS!", result.status, result.text);
this.loading = false;
this.resetForm();
})
.catch((e) => {
console.log("Error", e);
this.loading = false;
this.emailError = "Error while trying to send email";
});
}
},
resetForm() {
this.$refs[`EmailMessage`].reset();
},
contactImage: function (path) {
return require("@/" + path);
},
},
computed: {
...mapState("staticData", ["contact", "contactSocialMedia"]),
},
};
</script>
my actions in my store index.js
actions: {
sendMail: ({
commit
}, pl) => new Promise((resolve, reject) => {
if (pl.name) {
console.log('PL recieved: ', pl)
resolve('email is sent')
} else {
reject('email is not sent')
}
}),
},
I would really appreciate some help.
More From » vue.js
