No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Problem with the loading property of a button

    Help
    2
    6
    127
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • elC0mpa
      elC0mpa last edited by

      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

      1 Reply Last reply Reply Quote 0
      • G
        ghada last edited by

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

        1 Reply Last reply Reply Quote 0
        • elC0mpa
          elC0mpa last edited by

          @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

          1 Reply Last reply Reply Quote 0
          • G
            ghada last edited by

            This post is deleted!
            1 Reply Last reply Reply Quote 0
            • G
              ghada last edited by

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

              1 Reply Last reply Reply Quote 1
              • elC0mpa
                elC0mpa last edited by

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

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post