我怎样才能让这个 v-tabs Vuetify.js 组件工作？

Question

我 在页面上添加了这个 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>

如何在每个选项卡中显示单独的数据块？

Answer 1

要在 2020 年在 vuetify 的每个选项卡中使用自定义组件，请使用：

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