Vue+Vuetify集成EmailJS提交表单报错：第三个参数应为表单元素

问题 #

在基于Vue和Vuetify开发的应用中实现表单提交功能时，使用EmailJS遇到错误提示：The 3rd parameter is expected to be the HTML form element or the style selector of form。

代码片段 #

ContactForm.vue 模板部分

<v-form class="mx-8" ref="form" @submit.prevent="sendEmail">
        <v-col>
          <v-text-field
            v-model="from_name"
            name="from_name"
            label="Full Name"
            required
          ></v-text-field>
        </v-col>
        <v-col>
          <v-text-field
            v-model="from_email"
            name="from_email"
            label="Email"
            required
          ></v-text-field>
        </v-col>
        <v-col>
          <v-textarea
            v-model="message"
            name="message"
            outlined
            label="Tell us about your ideas, the type of website you want, your target market, and your desired style."
            :rules="textareaRules"
          ></v-textarea>
        </v-col>

        <v-card-actions>
          <v-spacer></v-spacer>

          <v-btn color="#99d215b9" class="card-button mb-4" type="submit">
            Submit
          </v-btn>
        </v-card-actions>
      </v-form>

脚本部分

import emailjs from "@emailjs/browser";
export default {
  data() {
    return {
      from_name: "",
      from_email: "",
      message: "",
    };
  },
  methods: {
    sendEmail() {
      emailjs
        .sendForm(
          "service_id",
          "template_id",
        {
         from_name: this.from_name,
         from_email: this.from_email,
          message: this.message,
         },
          "public_id"
        )
        .then(
          (result) => {
            console.log("SUCCESS!", result.text);
          },
          (error) => {
            console.log("FAILED...", error.text);
          }
        );
    },

尝试过用this.$refs.form作为参数，但仍出现相同错误，请问问题出在哪里，该如何解决？

解决方法 #

错误根源 #

你搞混了EmailJS的两个核心方法的参数要求：

• sendForm()：第三个参数必须是原生HTML表单元素或表单选择器，它会自动从表单里收集数据，不需要手动传参对象。
• send()：才支持把手动构造的参数对象作为第三个参数。

你的代码用了sendForm()，但第三个参数传的是手动构建的数据对象，完全不符合该方法的要求，所以报错。

修复方案（两种可选） #

方案1：正确使用sendForm()

直接传入原生表单元素，让EmailJS自动收集数据：

methods: {
  sendEmail() {
    // Vuetify的v-form是组件，原生DOM元素存在于$el属性里
    const formElement = this.$refs.form.$el;
    emailjs
      .sendForm(
        "service_id",
        "template_id",
        formElement,
        "public_id"
      )
      .then(
        (result) => {
          console.log("SUCCESS!", result.text);
          // 提交成功后重置表单
          this.$refs.form.reset();
        },
        (error) => {
          console.log("FAILED...", error.text);
        }
      );
  }
}

注意：确保表单内输入框的name属性和EmailJS模板里的变量名完全一致（你的代码已经满足这一点）。

方案2：改用send()方法

如果想手动传参对象，就替换成send()方法：

methods: {
  sendEmail() {
    emailjs
      .send(
        "service_id",
        "template_id",
        {
          from_name: this.from_name,
          from_email: this.from_email,
          message: this.message,
        },
        "public_id"
      )
      .then(
        (result) => {
          console.log("SUCCESS!", result.text);
          // 提交成功后重置数据
          this.from_name = "";
          this.from_email = "";
          this.message = "";
        },
        (error) => {
          console.log("FAILED...", error.text);
        }
      );
  }
}

额外注意点 #

• 用方案1时，不能直接传this.$refs.form，必须传this.$refs.form.$el，因为前者是Vuetify组件实例，不是原生HTML表单元素。
• 不管用哪种方案，要确保service_id、template_id、public_id是你在EmailJS后台获取的真实有效ID。

内容的提问来源于stack exchange，提问作者Killian Pierce