CODEWITHSUNDEEP
vue.jsnativescript
PinoyStackOverflower
PinoyStackOverflower

Reputation: 5302

Nativescript VueJS - how to enable and disable a button in axios

This is my code:

<Button text="Login" @tap="submit" class="btn btn-primary m-t-20" :isEnabled="isTappable" />


submit(event) {
                this.isTappable = false;
                let eventListener = this.isTappable;
                axios({
                    method: 'post',
                    url: '/api/authenticate/login',
                    data: {
                        username: 'test',
                        password: "12345"
                    }
                }).then(function(response){
                    eventListener = true;
                }).catch(function(error){
                    console.log(error);
                    eventListener = true;
                }).finally(function(){
                    eventListener = true;
                    console.log("eventListener: "+eventListener);
                });
            }

I noticed that the button disables, but it doesnt enable back. Any wrong stuff that I did here?

Thanks.

Upvotes: 1

Views: 1069

Answers (1)

Christian Carrillo
Christian Carrillo

Reputation: 2761

You should use arrow function with your promise functions(then, catch, finally) to keep the scope of this that is referencing to the vue object, then inside of your finally function u can do reference to the isTappable property using this, should be so:

<Button text="Login" @tap="submit" class="btn btn-primary m-t-20" :isEnabled="isTappable" />


submit(event) {
  this.isTappable = false;
  let eventListener = this.isTappable;
  axios({
      method: 'post',
      url: '/api/authenticate/login',
      data: {
          username: 'test',
          password: "12345"
      }
  }).then((response) => {
      eventListener = true;
  }).catch((error) => {
      console.log(error);
      eventListener = true;
  }).finally(() => {
      this.isTappable = true;
      eventListener = true;
      console.log("eventListener: "+eventListener);
  });
}

Upvotes: 2

Related Questions