vue.js - 依赖于 API 响应的 Vuetify 加载器

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

使用方括号或 [ 和 ] 只是 accessing properties 的另一种方式在您的 Javascript 对象中，除了点或 . 运算符。

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

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

this.loading4 = true;

但是，如果你愿意，你也可以这样做:

this['loading4'] = true;

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

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

这基本上就像您在 PHP 中将对象 视为多维数组。