vuetify 在另一个函数运行时显示“v-progress-linear”答案

【问题标题】：vuetify show "v-progress-linear" while another function is runningvuetify 在另一个函数运行时显示“v-progress-linear”
【发布时间】：2021-10-07 07:57:05
【问题描述】：

在此期间我有一个大循环，我想像这样显示“v-progress-linear”：

    <template>
      <div>
        <v-btn
          color="success"
          @click="allRun()"
        >
          Run
        </v-btn>
    
        <v-dialog
          v-model="dialog"
          hide-overlay
          persistent
        >
          <v-card
            color="primary"
            dark
          >
            <v-card-text>
              Please stand by
              <v-progress-linear
                indeterminate
              ></v-progress-linear>
            </v-card-text>
          </v-card>
        </v-dialog>
    
      </div>
    </template>
        
  <script>
    data () {
      return {
        dialog: false
      }
    },
        
 methods: {
    allRun: function () {
      this.editorRun()
      this.dialog = true
    },
    
    editorRun () {
       for (var i = 0; i < this.listModes.length; i++) {
         // do something...
       }
       this.dialog = false
    }
  }
    
  </script>

但是，我的“v-progress-linear”总是在循环之后执行，即使我在执行循环之前在 editorRun() 中启动它。

如何在执行循环之前启动“v-progress-linear”并在循环之后禁用？

【问题讨论】：

stackoverflow.com/q/59092698/381282

标签： javascript vue.js vuetify.js

【解决方案1】：

你可以像这样使用 async/await 重写你的组件：

<template>
  <v-app>
    <div>
      <v-btn color="success" @click="allRun()"> Run </v-btn>
      <v-dialog v-model="dialog" hide-overlay persistent>
        <v-card>
          <v-card-text>
            Please stand by
            <v-progress-linear indeterminate></v-progress-linear>
          </v-card-text>
        </v-card>
      </v-dialog>
    </div>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      dialog: false,
      listModes: [1, 2, 3],
    };
  },
  methods: {
    allRun() {
      this.dialog = true;
      this.editorRun();
    },

    async editorRun() {
      for (const item of this.listModes) {
        await this.longTask(item);
      }
      this.dialog = false;
    },
    async longTask(item) {
      await new Promise(resolve => setTimeout(resolve, 500));
    }
  },
};
</script>

CodeSandbox demo link

【讨论】：