Невозможно получить доступ к данным из методов в Vue. js - PullRequest
Новая
       78

Невозможно получить доступ к данным из методов в Vue. js

0 голосов
/ 10 июля 2020

Я пытаюсь отправить электронное письмо через простую контактную форму в Vue. js используя электронную почту js. После отправки почты я хочу обновить страницу, чтобы вместо формы отображалось сообщение отправлено. Я пытаюсь сделать это, используя v-if для отправленного логического значения, меняя его с false на true при отправке электронного письма. Но я не могу получить доступ к переменной, отправленной изнутри метода электронной почты js 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);
        });
    }
  }

1 Ответ

1 голос
/ 10 июля 2020

Основная проблема заключается в этой строке: 

sendEmail: (e) => {

VueJS в документации явно указано, что не следует использовать стрелочные функции при объявлении методов , потому что this внутри методы не будут относиться к самому компоненту VueJS.

Обратите внимание, что вы не должны использовать стрелочную функцию для определения метода (например, plus: () => this.a++). Причина в том, что стрелочные функции связывают родительский контекст, поэтому this не будет экземпляром Vue, как вы ожидаете, а this.a будет неопределенным.

Следовательно, это решит вашу проблему: 

sendEmail: function(e) {

или: 

sendEmail(e) {
...