0

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

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

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

4

0 回答 0