vuetify show "v-progress-linear" while another function is running

Question

I have a large loop during that I want to show "v-progress-linear" like so:

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

however, my "v-progress-linear" is always executed after the loop, even when I initiate it in the editorRun() before executing the loop.

How do I start "v-progress-linear" before executing a loop and disable after loop?

https://stackoverflow.com/q/59092698/381282 – Michal Levý Oct 07 '21 at 08:15 — Michal Levý, Oct 07 '21 at 08:15

score 1 · Answer 1 · answered Oct 07 '21 at 08:40

You may rewrite your component using async/await like this:

<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

vuetify show "v-progress-linear" while another function is running

1 Answers1