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

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

Answer 3

您还可以使用dynamic component标签内容绑定。这给您更多的灵活性和控制力。

Vue JS Dynamic Components

Live Example on JSFiddle

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

3 个答案: