title: Cannot access data from methods in Vue.js
body: <p>I am trying to send email through a simple contact form in Vue.js using emailjs. After the mail is sent, I want to update the page so that mail has been sent is displayed instead of the form. I am trying to do this by using v-if on the boolean sent, changing it from false to true on sending the email. But I am not able to access the variable sent from inside the emailjs <code>sendEmail</code> method.</p>
  <p>Here is the full code of the contact page:</p>
  <pre><code>&lt;template&gt;
      &lt;v-container justify-center class=&quot;contact-form&quot;&gt;
        &lt;v-form ref=&quot;form&quot; v-model=&quot;valid&quot; @submit.prevent=&quot;sendEmail&quot; v-if=&quot;sent == false&quot;&gt;
          &lt;v-text-field v-model=&quot;name&quot; :rules=&quot;namerules&quot; label=&quot;Name&quot; name=&quot;contact_name&quot; required&gt;&lt;/v-text-field&gt;
          &lt;v-text-field v-model.number=&quot;phone&quot; :rules=&quot;phonerules&quot; label=&quot;Phone number&quot; name=&quot;contact_number&quot; required&gt;&lt;/v-text-field&gt;
          &lt;v-text-field v-model=&quot;email&quot; :rules=&quot;emailrules&quot; label=&quot;Email&quot; name=&quot;contact_email&quot; required&gt;&lt;/v-text-field&gt;
          &lt;v-textarea v-model=&quot;message&quot; :rules=&quot;messagerules&quot; label=&quot;Message&quot; name=&quot;message&quot; required&gt;&lt;/v-textarea&gt;
          &lt;v-btn :disabled=&quot;!valid&quot; type=&quot;submit&quot; value=&quot;Send&quot; color=&quot;red&quot; @click=&quot;sendEmail&quot;&gt;Submit&lt;/v-btn&gt;
        &lt;/v-form&gt; 
        &lt;v-layout justify-center v-if=&quot;sent == true&quot;&gt;
          &lt;h1&gt;Your Mail Has Been Sent&lt;/h1&gt;
        &lt;/v-layout&gt;
        &lt;v-layout justify-center v-if=&quot;error == true&quot;&gt;
          &lt;h2&gt;There was an error sending Your Email. Please Try Again!&lt;/h2&gt;
        &lt;/v-layout&gt;
      &lt;/v-container&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import emailjs from &quot;emailjs-com&quot;;
  export default {
    data() {
      return {
        valid: false,
        sent: false,
        error: false,
        namerules: [
          v =&gt; !!v || &quot;Name is Required&quot;,
          v =&gt; /([A-Z])\w+/.test(v) || &quot;Name is Invalid&quot;
        ],
        phonerules: [
          v =&gt; !!v || &quot;Phone is Required&quot;,
          v =&gt; /^[0-9+]\d*$/.test(v) || &quot;Phone Number is invalid&quot;,
          v =&gt; v != 0 || &quot;Phone Number can't be zeoro!&quot;
        ],
        emailrules: [
          v =&gt; !!v || &quot;Email is Required&quot;,
          v =&gt; /.+@.+\..+/.test(v) || &quot;Enter a Valid Email&quot;
        ]
      }
    },
    methods: {
      sendEmail: (e) =&gt; {
        emailjs.sendForm('contact_service', 'contact_form', e.target, 'MY_API_KEY').then((result) =&gt; {
              this.sent = true;
              this.error = false;
              console.log('SUCCESS!', result.status, result.text);
          }, (error) =&gt; {
              this.sent = false;
              this.error = true;
              console.log('FAILED...', error);
          });
      }
    }
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  h1 {
    color: green;
  }
  h2 {
    color: red;
  }
  &lt;/style&gt;
  </code></pre>
  <p>Edit: Here is How I solved it after getting the answer:</p>
  <p>Changed the function to send email as:</p>
  <pre><code>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);
          });
      }
    }
  </code></pre>