Tengo un ciclo grande durante el cual quiero mostrar "v-progress-linear" así:
<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>sin embargo, mi "v-progress-linear" siempre se ejecuta después del bucle, incluso cuando lo inicio en el editorRun() antes de ejecutar el bucle.
¿Cómo inicio "v-progress-linear" antes de ejecutar un ciclo y desactivo después del ciclo?
Puede reescribir su componente usando async/await así:
<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>