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