Vuetify loader which depends on API response - vue.js

Question

I made a login form and button with preloader:
<v-btn #click="login" :loading="loading4" :disabled="loading4"
#click.native="loader = 'loading4'">
{{ $t('forms.labels.loginBtn') }}
<span slot="loader" class="btn-loader">
<v-icon light>cached</v-icon>
</span>
</v-btn>
I want to show btn preloader when api response is 'pending'.
I fetch api status from computed:
...mapGetters({
loginStatus: 'auth/authStatus'
}),
In Vuetify docs I found only solution with setTimeout and I don't know how to customize it to my api response:
watch: {
loader () {
const l = this.loader
this[l] = !this[l]
setTimeout(() => (this[l] = false), 3000)
this.loader = null
}
}
My store:
const state = {
token: localStorage.getItem('user-token'),
status: null
}
I want to show preloader only when state status is 'loading'. I'm changing state using mutation.
How to do this and what this[l] means?
Thanks.

Answer 1

Using brackets or [ and ] is just an another way for accessing properties in your Javascript object aside from the dot or . operator.
The brackets is usually used for accessing properties dynamically.
For example, the most common way to access an object property is like this:
this.loading4 = true;
But, you can also do it like this if you want to:
this['loading4'] = true;
and you can also supply a variable instead of a string literal:
const l = 'loading4';
this[l] = true;
It's basically like you are treating your object like a multi-dimensional array in PHP.

Answer 2

You could also try using loading as a state in your Vuex module without using watch hook just like #Jeremy Walters suggested.
Vuex
state: {
loading: false
},
getters: {
isLoading(state) {
return state.loading
},
mutations: {
loginSuccess(state, payload) {
state.loading = false //ends the loader
...
},
loginFailed(state, payload) {
state.loading = false //ends the loader
...
},
},
actions: {
login({state,commit},credentials) {
state.loading = true //starts the loader
axios.post('/api/auth/login', credentials)
.then((response) => {
commit("loginSuccess", response.data)
})
.catch((error) => {
commit("loginFailed", error.response.data)
})
}
Then in your component
HTML
<v-btn #click="login" :loading="isLoading" :disabled="isLoading">
{{ $t('forms.labels.loginBtn') }}
<span slot="loader" class="btn-loader">
<v-icon light>cached</v-icon>
</span>
</v-btn>
JS
...mapGetters({
'isLoading'
})
Regarding the explanation for the this[l], it was already explained nicely by the answer below.