【发布时间】:2020-11-11 18:32:09
【问题描述】:
我有一个主要组件,其中导入了其他小组件。如何使用 v-breadcrumbs(vuetify) 在这些小组件之间切换???
【问题讨论】:
-
请分享一些可重现的代码
标签: javascript vue.js vuetify.js
我有一个主要组件,其中导入了其他小组件。如何使用 v-breadcrumbs(vuetify) 在这些小组件之间切换???
【问题讨论】:
标签: javascript vue.js vuetify.js
由于面包屑在语义上应该会影响您的路径,因此您可能应该使用 tabs (v-tabs) 来完成您需要的操作。
一般:
<template>
<v-tabs
v-model="tab"
background-color="transparent"
color="basil"
grow
>
<v-tab
v-for="item in items"
:key="item"
>
{{ item }}
</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item
v-for="item in items"
:key="item"
>
<v-card
color="basil"
flat
>
<v-card-text>{{ text }}</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</template>
<script>
export default {
data () {
return {
tab: null,
items: [
'Appetizers', 'Entrees', 'Deserts', 'Cocktails',
],
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
}
},
}
</script>
【讨论】: