[英]Vuetify form .$refs validate is not a function
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.我在 v-on 处理程序中遇到错误:“TypeError: this.$refs.EmailMessage.validate 不是我表单上的函数,当我点击控制台发送时,this.$refs.EmailMessage.validate 不是函数。
I created a Mapactions where I commit the Payload to the emailjs server我创建了一个 Mapactions,我将 Payload 提交到 emailjs 服务器
I've tested $refs somewhere else and it does the same thing.我已经在其他地方测试过 $refs 并且它做同样的事情。 could it be that Vuejs has a bug?难道是 Vuejs 有 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@gmail.com" : 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我在我的商店 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.我真的很感激一些帮助。
Got it to work!得到它的工作!
I had a look at this example and gave it a try this.$refs[(“p” + index)].focus is not a function我看了一下这个例子并试了一下this.$refs[(“p” + index)].focus is not a function
problem was you need to add an array of 0 to the line where $refs are.问题是您需要在 $refs 所在的行中添加一个 0 数组。
here are my methods under export default这是我在导出默认值下的方法
methods: {
...mapActions(["sendMail"]),
validate() {
//Added [0] after email message
if (this.$refs[`EmailMessage`][0].validate()) {
this.loading = true;
emailjs
.send(
"gmail_service_id",
"ContactForm",
this.fd,
"InsertemailjsserviceIDhere"
)
.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() {
//Added [0] after email message
this.$refs[`EmailMessage`][0].reset();
},
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.