请求进行时 Vue js 2 加载圆圈 + 超时

Question

我的页面上有一个编辑按钮，当我点击它时我可以编辑一些东西然后保存或关闭而不保存，我想在用户点击保存之前添加一个进度圈然后显示结果因为现在它只是显示一条消息“已更新”，我希望在收到消息之前有一个 5 秒的进度圈。 这是我到目前为止所做的：

             <v-col cols="3">
              <v-btn
                v-if="editGroup"
                light
                class="mx-2"
                @click="editGroup = false"
              >
                <v-icon left>mdi-close</v-icon>
                Close
              </v-btn>
              <v-btn
                v-if="editGroup && loading" 
                light 
                class="mx-2" 
                @click="clickSave"
                >
                <v-icon left>mdi-content-save</v-icon>
                Save
              </v-btn>
              <v-btn
                v-if="
                  canShowButton(['administrateur', 'configurateur']) &&
                  !editGroup
                "
                light
                class="mx-2"
                @click="editGroup = true"
              >
                <v-icon left>mdi-pencil</v-icon>
                Update
              </v-btn>
            </v-col>

还有我的编辑功能：

 async clickSave() {
  this.editGroup = false
  this.loading = true

  let uri = this.endpointPrefix + '/groups/' + this.groupid
  let dat = {
    name: this.groupDataEdited.name,
    description: this.groupDataEdited.description,
    idTariff: this.groupDataEdited.idTariff,
    idEvseToAdd: [],
  }
  setTimeout(() => {
    this.loading = true
  }, 5000);
  await this.$axios.$put(uri, dat)
    .then(() => {
        this.$nuxt.$emit('show-notification', {
          text: 'Updated',
          color: 'green',
        })
        this.loadData(this.groupid)
    })
    .catch((error) => {
      this.$nuxt.$emit('show-notification', {
        text:
          'Could not be updated ' +
          error.response.data,
        color: 'red',
      })
    })        
    .finally(() => (this.loading = false))
},

但它似乎没有工作（至少超时部分）至于进度圈我不知道我应该在什么时候添加它。

Answer 1

您在 5 秒后设置

loading = true

。那么会发生什么是：

1. 开始加载（从最初的

   this.loading = true

   ）
2. 运行承诺并在完成后将加载设置为

   false

3. 5 秒后，再次将

   loading

   设置为true。它永远不会是

   false

   了。

如果你想要真正的加载时间，你的

setTimeout

就没用了。如果你想强制加载为 5 秒，那么只需在你的 setTimeout 中将其设置为 false，而不是在

finally

块中：

this.loading = true
setTimeout(() => {
  this.loading = false
}, 5000);

await this.$axios.put()

但我不建议这样做，因为加载完全是假的，并不能反映您的真实承诺状态。

---

关于微调器，只需使用 Vuetify

v-progress-circular

组件即可。

<v-progress-circular
   v-show="isLoading"
   indeterminate
   color="primary"
></v-progress-circular>