如何使这个 v-tabs Vuetify.js 组件工作？

Question

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

Answer 2

您还可以使用dynamic component 选项卡内容绑定。这为您提供了更大的灵活性和控制力。

Vue JS Dynamic Components

Live Example on JSFiddle

Answer 3

如果您希望将所有内容抽象到 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>