我有一个带有四个选项卡的组件。除第一个选项卡外,所有选项卡都包含大量文本字段,并且需要几秒钟来呈现组件。我想在用户单击选项卡时显示一个带有进度条的对话框,并在选项卡打开时将其隐藏。
<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
为加载选项卡项目的内容时,如何设置值?true
false