Как правильно настроить v-tabs во vuetify.js?

Question

[Kiril Kharkevich]

Добрый день. Использую данный компонент https://vuetifyjs.com/ru/components/tabs не могу разобраться в его структуре. Как выводить информацию в нужную вкладку, а то в примере оно выводит сразу во все вкладки? Не могу понять как оно устроенно. Так-же как вложить компонент, допустим сard.vue в нужную вкладку?

Answer 1

[Сергей delphinpro]

Там же пример есть?!

<v-tabs v-model="active">
  <v-tab v-for="n in 3" :key="n">Item {{ n }}</v-tab>
  <v-tab-item v-for="n in 3" :key="n">
      Любое содержимое 
  </v-tab-item>
</v-tabs>

Карточки выводятся в цикле. Для связи используется key, это может быть уникальный идентификатор вкладки или индекс массива.

В примере, само собой все упрощено, в реальном приложении вы замените цикл на реальные данные. Опять же упрощенно это может выглядеть так:

data: function(){
  return {
    tabList: [
      {caption: 'Вкладка 1', content: '<h1>Содержимое первой вкладки</h1>'},
      {caption: 'Вкладка 2', content: '<h1>Содержимое второй вкладки</h1>'},
      {caption: 'Вкладка 3', content: '<h1>Содержимое третьей вкладки</h1>'},
    ]
  }
}

<v-tab v-for="(tab, index) in tabList" :key="index">Item {{ tab.caption }}</v-tab>
<v-tab-item v-for="(tab, index) in tabList" :key="index">
  <div v-html="tab.content"></div>
</v-tab-item>

конечно, вы не будете в массиве данных содержать разметку, там будут чистые данные, которые могут рендерится в шаблоне прямо на месте, или передаваться в компонент внутри вкладки.

UPD
Если ваши вкладки не могут быть заданны массивом, потому что у них кардинально разное содержание, вы можете выводить вкладки без цикла

<v-tab :key="1">Tab 1</v-tab>
<v-tab :key="2">Tab 2</v-tab>

<v-tab-item :key="1">Содержимое вкладки 1</v-tab-item>
<v-tab-item :key="2">Содержимое вкладки 2</v-tab-item>