Vue2：在 vuetify 中加载选项卡项内容时显示进度条

Question

我有一个带有四个选项卡的组件。除了第一个选项卡之外，所有选项卡都包含大量文本字段，渲染组件需要几秒钟的时间。我想在用户单击选项卡时显示一个带有进度条的对话框，并在选项卡打开时隐藏它。

<v-dialog v-model="showLoading" persistent width="300">
  <v-card color="primary" dark>
    <v-card-text>
      Loading...
      <v-progress-linear indeterminate color="white" height="5" class="mt-1 mb-0"></v-progress-linear>
    </v-card-text>
  </v-card>
</v-dialog>

<v-card>
  <v-tabs
    v-model="tab"
    background-color="primary"
    dark
  >
    <v-tab
      v-for="item in items"
      :key="item.tab"
    >
      {{ item.tab }}
    </v-tab>
  </v-tabs>

  <v-tabs-items v-model="tab">
    <v-tab-item
      v-for="item in items"
      :key="item.tab"
    >
      <v-card flat>
        <v-card-text v-if="item.tab == 'One'">{{ item.content }}</v-card-text>
        <v-card-text v-else>
          <v-text-field v-for="i in 1000"></v-text-field>
        </v-card-text>
      </v-card>
    </v-tab-item>
  </v-tabs-items>
</v-card>

我制作了一个 codepen，您可以在其中找到选项卡和对话框。如何在用户单击选项卡时将 showLoading 的值设置为 true，并在加载选项卡项的内容时将其再次设置为 false？