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

Question

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

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

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

Answer 1

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

sendEmail: (e) => {

VueJS 文档明确指出您 should not use arrow functions when declaring methods，因为方法中的 this 不会引用 VueJS 组件本身。

Note that you should not use an arrow function to define a method (e.g. plus: () => this.a++). The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect and this.a will be undefined.

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

sendEmail: function(e) {

或：

sendEmail(e) {

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

Cannot access data from methods in Vue.js

javascript

vue.js

vuejs2

vue-component

vuejs3