Как я могу сделать это v-tabs Vuetify.работа компонента js?
У меня есть этот v-tabs, добавленный на странице.
В Примере к компоненту привязан только 1 блок данных (text) (все 3 вкладки отображают эти textданные):
<template>
<v-tabs fixed centered>
<v-tabs-bar class="cyan" dark>
<v-tabs-slider class="yellow"></v-tabs-slider>
<v-tabs-item
v-for="i in items"
:key="i"
:href="'#tab-' + i"
>
{{ i }}
</v-tabs-item>
</v-tabs-bar>
<v-tabs-items>
<v-tabs-content
v-for="i in items"
:key="i"
:id="'tab-' + i"
>
<v-card flat>
<v-card-text>{{ text }}</v-card-text>
</v-card>
</v-tabs-content>
</v-tabs-items>
</v-tabs>
</template>
<script>
export default {
data () {
return {
items: ['Item One', 'Item Seventeen', 'Item Five'],
text: 'Lorem ipsum dolor sit amet, consectetur'
}
}
}
</script>
Как отобразить отдельный блок данных на каждой вкладке?
У вопроса есть решение - Посмотреть?
Ответы - Как я могу сделать это v-tabs Vuetify.работа компонента js? / How can I make this v-tabs Vuetify.js component work?
Является ответом!
01.01.2018 02:33:12
Если вы хотите, чтобы все было абстрагировано в раздел data, то вы можете сделать что-то вроде этого https://codepen.io/anon/pen/Leyoqz :
<template>
<v-tabs fixed centered>
<v-tabs-bar class="cyan" dark>
<v-tabs-slider class="yellow"></v-tabs-slider>
<v-tabs-item
v-for="item in items"
:key="item.id"
:href="'#tab-' + item.id"
>
{{ item.title }}
</v-tabs-item>
</v-tabs-bar>
<v-tabs-items>
<v-tabs-content
v-for="item in items"
:key="item"
:id="'tab-' + item.id"
>
<v-card flat>
<v-card-text>{{ item.text }}</v-card-text>
</v-card>
</v-tabs-content>
</v-tabs-items>
</v-tabs>
</template>
<script>
export default {
data () {
return {
items: [
{
title: "First Item",
text: "This is the first text",
id: 1
},
{
title: "Second Item",
text: "This is the second text",
id: 2
},
{
title: "Third Text",
text: "This is the third text",
id: 3
},
]
}
}
}
</script>
Или, если вам не нужно, чтобы он был динамическим, то вы можете просто жестко закодировать все это вот так:
<v-tabs fixed centered>
<v-tabs-bar class="cyan" dark>
<v-tabs-slider class="yellow"></v-tabs-slider>
<v-tabs-item href="#tab-1">
Tab One
</v-tabs-item>
<v-tabs-item href="#tab-2">
Tab Two
</v-tabs-item>
<v-tabs-item href="#tab-3">
Tab Three
</v-tabs-item>
</v-tabs-bar>
<v-tabs-items>
<v-tabs-content id="tab-1">
<v-card flat>
<v-card-text>This is the first tab</v-card-text>
</v-card>
</v-tabs-content>
<v-tabs-content id="tab-2">
<v-card flat>
<v-card-text>This is the second tab</v-card-text>
</v-card>
</v-tabs-content>
<v-tabs-content id="tab-3">
<v-card flat>
<v-card-text>This is the third tab</v-card-text>
</v-card>
</v-tabs-content>
</v-tabs-items>
Спасибо большое, теперь я понимаю, как вкладки работают с петлей. Раньше я не мог понять, как пользоваться удостоверением личности. Спасибо
26.01.2019 02:19:02
можно также использовать привязку содержимого вкладки динамических компонентов. что дает вам больше гибкости и контроля.
28.01.2020 05:21:19
Для использования пользовательских компонентов внутри каждой вкладки в vuetify в 2020 году используйте:
<v-container>
<v-tabs centered>
<v-tabs-slider/>
<v-tab>Tab1</v-tab>
<v-tab>Tab2</v-tab>
<v-tab>Tab3</v-tab>
<v-tab-item>
<MyView1 />
</v-tab-item>
<v-tab-item>
<MyView2 />
</v-tab-item>
<v-tab-item>
<MyView3 />
</v-tab-item>
</v-tabs>
</v-container>