Vuejs Emailjs Vee-validate 类型错误：无法读取未定义的属性“目标”

如何解决Vuejs Emailjs Vee-validate 类型错误：无法读取未定义的属性“目标”

当我想使用 emailjs 和 vee-validate 验证和传输我的数据时遇到问题。 当我不使用 vee-validate 时，它​​会起作用。 你能帮助我吗 ？ 谢谢

版本

• vee 验证：3.4.5
• vue: 2.6.6
• emailjs：“^3.4.0”
• emailjs-com:"^2.6.4"

验证提供者

<ValidationObserver v-slot="{handleSubmit}">
            <form @submit.prevent="handleSubmit(sendEmail)">
                <ValidationProvider
                    name="nom"
                    rules="required|alpha_spaces"
                    v-slot="{ errors }"
                >
                    <base-input
                        type="text"
                        v-model="name"
                        name="name"
                        class="mt-5"
                        alternative
                        placeholder="Votre nom"
                        addon-left-icon="ni ni-user-run"
                    >
                    </base-input>
                    <span>{{ errors[0] }}</span>
                </ValidationProvider>

.....

               <base-button
                    @click="handleSubmit(sendEmail)"
                    type="pink"
                    round
                    block
                    size="lg"
                >
                    Envoyer le message
                </base-button>
            </form>
        </ValidationObserver>

脚本：

import emailjs from 'emailjs-com'
export default {
  name: 'ContactUs',data: () => ({
    name: '',email: '',message: '',}),methods: {
    sendEmail(e) {
      try {
        emailjs.sendForm(
          'service_xxx','template_xxx',e.target,'user_xxx',{
            name: this.name,email: this.email,message: this.message,}
        )
      } catch (error) {
        console.log({ error })
      }

      alert('Le formulaire a été transmis !')
      // Reset form field
      this.name = ''
      this.email = ''
      this.message = ''
    },},}

错误：

TypeError: Cannot read property 'target' of undefined at VueComponent.sendEmail

非常感谢您的帮助！

解决方法

handleSubmit 不会将事件参数传递给给定的回调，因此 e 未定义。

您可以使用 template ref 直接引用表单，而不是 e.target（如果传递事件，它将是表单元素）：

<form ref="myForm">

export default {
  methods: {
    sendEmail() {
      try {
        emailjs.sendForm(
          'service_xxx','template_xxx',this.$refs.myForm,?
          'user_xxx',{
            name: this.name,email: this.email,message: this.message,}
        )
      } catch (error) {
        console.log({ error })
      }
    }
  }
}