vuetify 显示"v-progress-linear"而另一个函数正在运行

Question

我有一个大循环，我想显示"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>

然而，my "v-progress-linear"总是在循环之后执行，即使我在执行循环之前在editorRun()中启动它。

如何开始"v-progress-linear"在执行循环之前并在循环后禁用?

Answer 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演示链接