How to change data in Vue JS dynamically

Question

I am using Vue JS as my frontend. I have encountered a problem.

This is my component data -

data: () => ({
        email: "",
        showError : false
    }),

And this is the html -

<div v-show='showError' class='errorBox'>
    <p>Error</p>
</div>

I am not able to change the showError in the data dynamically. I am writing the code to change the value something like this but it does not change and does not show any error in the console -

axios.get('/accounts/passwordresetpage_ajax_validation/' + '?email=' + email.value)
.then(function (res) {
                        if (res.data.email_does_not_exists) {
                            return this.showError = true
                        } else {
                        document.querySelector('form').submit()
                            
                        }
                    });

This piece of code is inside a component method. Someone please help

Answer 1

like @punund said, this here does not reference the component to which the data property is attached. The context in which you are using the this keyword is in the callback. There are a couple of things you can do. You can use a variable to save a reference to this

const self = this;
axios.get('/accounts/passwordresetpage_ajax_validation/' + '?email=' + email.value)
  .then(function (res) {
    if (res.data.email_does_not_exists) {
      self.showError = true
    } else {
      document.querySelector('form').submit()
    }
  });

You can also use the bind method to return a function that has the context of the vue component

axios.get('/accounts/passwordresetpage_ajax_validation/' + '?email=' + email.value)
  .then(function (res) {
    if (res.data.email_does_not_exists) {
      this.showError = true
    } else {
      document.querySelector('form').submit()
    }
  }.bind(this)
  );

My personal favourite way, and the cleanest way to get the this keyword to reference the vue component is to use the ES2015 arrow function

 axios.get('/accounts/passwordresetpage_ajax_validation/' + '?email=' + email.value)
  .then((res) => {
    if (res.data.email_does_not_exists) {
          this.showError = true
    } else {
      document.querySelector('form').submit()
    }
  });

If you want to know more, this post does an excellent job of explaining it.

Alternatively, if videos are your thing, you can reference this Youtube video which does a masterful job of explaining context.

Answer 2

this inside .then(function (res) doesn't point to what you think. Access data directly:

axios.get('/accounts/passwordresetpage_ajax_validation/' + '?email=' + email.value)
.then(function (res) {
                        if (res.data.email_does_not_exists) {
                            return data.showError = true
                        } else {
                        document.querySelector('form').submit()
                            
                        }
                    });