無法從 Vue.js 中的方法訪問數據

Question

我正在嘗試使用 emailjs 通過 Vue.js 中的簡單聯系表格發送 email。 發送郵件后，我想更新頁面，以便顯示已發送郵件而不是表單。 我試圖通過在發送的 boolean 上使用 v-if 來做到這一點，在發送 email 時將其從 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>

編輯：這是我得到答案后的解決方法：

將 function 更改為發送 email 為：

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 文檔明確指出在聲明方法時不應使用箭頭函數，因為方法中的this不會引用 VueJS 組件本身。

請注意，您不應使用箭頭 function 來定義方法（例如plus: () => this.a++ ）。 原因是箭頭函數綁定了父上下文，所以this不會是你期望的 Vue 實例，並且this.a將是未定義的。

因此，這將解決您的問題：

sendEmail: function(e) {

或者：

sendEmail(e) {