Problem with the loading property of a button

[elC0mpa]

I am binding the loading property of a button to a variable in my data(). The thing is that, I modiffy this variable when the front end makes an http request to the backend in order ti show to the user that front end is waiting for response. When I modiffy the variable, the UI isn’t updated

onSubmit() {
      this.waitingForResponse = true;
      console.log('Trying to Login');
      const object = {};
      object['email'] = this.email;
      object['password'] = this.password;
      this.$store
        .dispatch('auth/login', object)
        .then(() => {
          this.$router.push({ name: 'Home' });
        })
        .catch(error => {
          this.$q.notify({
            type: 'negative',
            message: error
          });
        });
      this.waitingForResponse = false;
    }

If waitingForResponse variable is initialized as true, the button shows its loading status. Thanks in advance

[ghada]

try this
console.log(‘Trying to Login’);
const object = {};
object[‘email’] = this.email;
object[‘password’] = this.password;
this.$store
.dispatch(‘auth/login’, object)
.then(() => {
this.waitingForResponse = true;
this.$router.push({ name: ‘Home’ });
})
.catch(error => {
this.$q.notify({
type: ‘negative’,
message: error
});
});
this.waitingForResponse = false;
}

[elC0mpa]

@ghada thanks, but that won’t work for me. The thing is that what I precissely want is to show the loading status when the user clicks the login button (which executes this method) in order to show that background process is being done, so I need to act over the variable as soon as the function is being executed

[ghada]

This post is deleted!

[ghada]

I dont know if this can work bur try using async and await for example :
async callSubmit(){
await onSumit()
this.waitingForReponse = false
}

[elC0mpa]

@ghada thank you very much!!! I declared the method as async method and later I used the await when calling the action and it worked!!! Thanks