How to properly set up v-tabs in vuetify.js?

Question

Vue.js

Good afternoon. I use this component https://vuetifyjs.com/ru/components/tabs and I can't understand its structure. How to display information in the desired tab, otherwise in the example it displays immediately in all tabs? I can't figure out how it's set up. So how to nest a component, let's say card.vue in the desired tab?

Answer 1

Is there an example there?

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

Cards are displayed in a cycle. The key is used for linking, it can be a unique tab identifier or an array index.
In the example, of course, everything is simplified, in a real application, you will replace the loop with real data. Again, simplified, it could look like this:

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>

of course, you will not contain markup in the data array, there will be pure data that can be rendered in the template right in place, or passed to the component inside the tab.
If your tabs can't be given an array because they have drastically different content, you can display the tabs without a loop

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