Problem with the loading property of a button



  • 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



  • 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;
    }



  • @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



  • This post is deleted!


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



  • @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 👍


Log in to reply