Vuetify loader 依赖于 API 响应

Question

>我用预加载器制作了一个登录表单和按钮：

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

我想在 api 响应"挂起"时显示 btn 预加载器。 我从计算中获取 api 状态：

...mapGetters({
loginStatus: 'auth/authStatus'
}),

在 Vuetify 文档中，我找到了唯一带有 setTimeout 的解决方案，我不知道如何根据我的 api 响应对其进行自定义：

watch: {
loader () {
const l = this.loader
this[l] = !this[l]
setTimeout(() => (this[l] = false), 3000)
this.loader = null
}
}

我的商店：

const state = {
token: localStorage.getItem('user-token'),
status: null
}

我想仅在状态为"正在加载"时才显示预加载器。我正在使用突变改变状态。

如何做到这一点，this[l]意味着什么？ 谢谢。

Answer 1

使用括号或[和]只是访问 Javascript 对象中除点或.运算符之外的属性的另一种方法。

括号通常用于动态访问属性。

例如，访问对象属性的最常见方法是这样的：

this.loading4 = true;

但是，如果您愿意，也可以这样做：

this['loading4'] = true;

您还可以提供一个变量而不是字符串文字：

const l = 'loading4';
this[l] = true;

这基本上就像你对待你的object就像PHP中的multi-dimensional array一样。

Answer 2

你也可以尝试在Vuex模块中使用loading作为状态，而无需像Walters建议的那样使用watch钩子@Jeremy。

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

然后在您的组件中

.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'
})

关于this[l]的解释，下面的答案已经很好地解释了。