Vuetify form .$refs validate is not a function

Question

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.

Answer 1

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

problem was you need to add an array of 0 to the line where $refs are.

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();
    },

  },