title: VueJs can't access data property within the function
body: <p>I'm having a problem accessing data property, within the function. I'm missing something and I can't figure out what.</p>
  
  <p>this is my class</p>
  
  <pre><code>export default {
      name: "Contact",
      components: {
          FooterComponent: FooterComponent,
          NavigationComponent: NavigationComponent
      },
      data() {
          return {
              locale: Cookie.get('locale'),
              nameAndLastName: '',
              email: '',
              subject: '',
              message: '',
              showPopUp: false
          }
      },
      methods: {
          sendEmail(e) {
              e.preventDefault();
              this.$validator.validateAll();
              if (!this.$validator.errors.any()) {
                  let params = new URLSearchParams();
                  params.append('nameAndLastName', this.nameAndLastName);
                  params.append('email', this.email);
                  params.append('subject', this.subject);
                  params.append('message', this.message);
  
                  axios.post(this.$apiUrl + `rest/api/public/Contact/contact`, params, {
                      headers: {
                          'Content-Type': 'application/x-www-form-urlencoded'
                      }
                  })
                      .then(function (response) {
                          if (response.statusText === 'OK') {
                              console.log(this.showPopUp);
                              this.showPopUp = true;
                          }
                      })
                      .catch(function (error) {
                          console.log(error);
                          // This throws error TypeError: Cannot read property 'showPopUp' of undefined
  
                      });
              }
          }
      },
      mounted: function () {
          console.log('test');
          console.log(this.showPopUp);
      },
  }
  </code></pre>
  
  <p>So the problem is when I send message, the response is OK, email is sent, but I'm keep getting error <code>TypeError: Cannot read property 'showPopUp' of undefined</code>... when I try to print console.log(this.showPopUp) in mounted hook, variable is display OK, so why I can't access it from the method? I'm using VueJs 2.</p>
  
  <p>If you need any additional informations, please let me know and I will provide. Thank you!</p>