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或]和.还是Javascript对象中accessing properties的另一种方式。

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

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

this.loading4 = true;

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

this['loading4'] = true;

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

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

这基本上就像您将object像PHP中的multi-dimensional array一样。

Answer 2

您也可以尝试使用loading作为Vuex模块中的状态，而不必像 @Jeremy Walters 建议的那样使用监视钩。

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]的解释，下面的答案已经很好地解释了。

Vuetify加载程序取决于API响应

2 个答案: