javascript - Vuetify form .$refs validate 不是函数

Question

我在 v-on 处理程序中遇到错误：“TypeError：当我在控制台中单击发送时，this.$refs.EmailMessage.validate 不是我表单上的函数，而且 this.$refs.EmailMessage.validate 不是函数。

我创建了一个 Mapactions 我将 Payload 提交到 emailjs 服务器

我在其他地方测试了 $refs 并且它做同样的事情。会不会是 Vuejs 有错误？还是我在做傻事？

我的联系页面中的表格

  <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>

我处理联系表发送和重置的方法

<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" ? "[e-mail]" : 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>

我在商店 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')
      }
    }),
  },

我真的很感激一些帮助。

标签： javascriptvue.jsvuetify.js

Answer 1

让它工作！

我看了一下这个例子并试了一下this.$refs[(“p” + index)].focus 不是一个函数

问题是您需要在 $refs 所在的行中添加一个 0 数组。

这是我在导出默认值下的方法

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

  },