时间戳

首页 > 解决方案 > 无法从 Vue.js 中的方法访问数据

javascript - 无法从 Vue.js 中的方法访问数据

问题描述

我正在尝试使用 emailjs 通过 Vue.js 中的简单联系表单发送电子邮件。发送邮件后，我想更新页面，以便显示已发送邮件而不是表单。我试图通过在发送的布尔值上使用 v-if 来做到这一点，在发送电子邮件时将其从 false 更改为 true。但我无法访问从 emailjssendEmail方法内部发送的变量。

这是联系页面的完整代码：

<template>
    <v-container justify-center class="contact-form">
      <v-form ref="form" v-model="valid" @submit.prevent="sendEmail" v-if="sent == false">
        <v-text-field v-model="name" :rules="namerules" label="Name" name="contact_name" required></v-text-field>
        <v-text-field v-model.number="phone" :rules="phonerules" label="Phone number" name="contact_number" required></v-text-field>
        <v-text-field v-model="email" :rules="emailrules" label="Email" name="contact_email" required></v-text-field>
        <v-textarea v-model="message" :rules="messagerules" label="Message" name="message" required></v-textarea>
        <v-btn :disabled="!valid" type="submit" value="Send" color="red" @click="sendEmail">Submit</v-btn>
      </v-form> 
      <v-layout justify-center v-if="sent == true">
        <h1>Your Mail Has Been Sent</h1>
      </v-layout>
      <v-layout justify-center v-if="error == true">
        <h2>There was an error sending Your Email. Please Try Again!</h2>
      </v-layout>
    </v-container>
</template>

<script>
import emailjs from "emailjs-com";
export default {
  data() {
    return {
      valid: false,
      sent: false,
      error: false,
      namerules: [
        v => !!v || "Name is Required",
        v => /([A-Z])\w+/.test(v) || "Name is Invalid"
      ],
      phonerules: [
        v => !!v || "Phone is Required",
        v => /^[0-9+]\d*$/.test(v) || "Phone Number is invalid",
        v => v != 0 || "Phone Number can't be zeoro!"
      ],
      emailrules: [
        v => !!v || "Email is Required",
        v => /.+@.+\..+/.test(v) || "Enter a Valid Email"
      ]
    }
  },
  methods: {
    sendEmail: (e) => {
      emailjs.sendForm('contact_service', 'contact_form', e.target, 'MY_API_KEY').then((result) => {
            this.sent = true;
            this.error = false;
            console.log('SUCCESS!', result.status, result.text);
        }, (error) => {
            this.sent = false;
            this.error = true;
            console.log('FAILED...', error);
        });
    }
  }
};
</script>

<style scoped>
h1 {
  color: green;
}
h2 {
  color: red;
}
</style>

编辑：这是我得到答案后的解决方法：

将发送电子邮件的功能更改为：

methods: {
    sendEmail(e) {
      this.sending = true;
      const self = this;
      emailjs.sendForm('contact_service', 'contact_form', e.target, 'user_lYBM45aIuAfPKnfWx0b5n').then(function(result) {
            self.sending = false;
            self.sent = true;
            self.error = false;
            console.log('SUCCESS!', result.status, result.text);
        }, function (error) {
            self.sending = false;
            self.sent = false;
            self.error = true;
            console.log('FAILED...', error);
        });
    }
  }

标签： javascriptvue.jsvuejs2vue-componentvuejs3

解决方案

您的主要问题在于这一行：

sendEmail: (e) => {

VueJS 文档明确指出在声明方法时不应使用箭头函数，因为this方法内部不会引用 VueJS 组件本身。

请注意，您不应使用箭头函数来定义方法（例如plus: () => this.a++）。原因是箭头函数绑定了父上下文，因此this不会像您期望的那样是 Vue 实例并且this.a将是未定义的。

因此，这将解决您的问题：

sendEmail: function(e) {

或者：

sendEmail(e) {

推荐阅读