javascript - 在繁重的任务中单击后微调器不显示/按钮冻结

Question

我有一个看起来很简单的问题，但我找不到解决方案。

我有一个带有选择按钮和图表的页面。当我选择一个选项时，会调用 updateGraph 方法。在这种方法中，我更改了数据 this.loading 以显示微调器而不是图表。

第一个问题：微调器不显示。第二个问题：任务比较长，选择按钮也被阻塞（没有关闭）。

我尝试使用 async/await 但它没有改变任何东西。

我不知道这是否可能，或者我是否以错误的方式做事。提前感谢您的帮助和建议。

<v-select [...] @change="updateGraph"></v-select>

<v-row v-if="!processingDatas">
  [...] No problem 
<v-row v-else justify="center" class="pa-5">
  <v-progress-circular
        :size="70"
        :width="7"
        color="accent"
        indeterminate
      ></v-progress-circular>
    </v-row>

data() {
      return {
        processingDatas: false,
        ...
             }

updateGraph() {
        this.processingDatas = true
        this.formatFlux().then(() => {
          this.processingDatas = false
        })
      },

async formatFlux() {
        [...]
        // long task
        // it takes few seconds
        return await Promise.resolve()
      },

标签： javascriptvue.jsvuetify.js