Vuetify - 带有 vue 组件的选项卡

Question

我正在使用 vue.js 和 vuetify 进行一些网页设计，并且在尝试在 vuetify v-tab 中显示 vue 组件时遇到了问题。

我的 vue 组件中有以下标记：

<v-tabs>
    <v-tab href="#search">
        Søg
    </v-tab>
    <v-tab href="#rare">
        SU
    </v-tab>
    <v-tab href="#review">
        2019
    </v-tab>

    <v-tabs-items>
        <v-tab-item key="search">
            <ObservationSelection />
        </v-tab-item>
        <v-tab-item key="rare">
            <ObservationSu />
        </v-tab-item>
        <v-tab-item key="review">
            <ObservationAaretsGang />
        </v-tab-item>
    </v-tabs-items>
</v-tabs>

似乎由于某种原因，v-tab-item 没有正确“连接”到 v-tab，所以我在每个 v-tab 中看不到任何内容。

如果在 v-tab 之外使用，每个相关组件都可以很好地工作。

Answer 1

取出v-tabs-items并将内容物放入v-tabs元素内。

结构将是：

• v-tabs
  • v-tab
  • v-tab-item

这给了我们：

<v-tabs>

  <v-tab href="#search">
    Søg
  </v-tab>
  <v-tab-item value="search">
    <ObservationSelection />
  </v-tab-item>

  <v-tab href="#rare">
    SU
  </v-tab>
  <v-tab-item value="rare">
    <ObservationSu />
  </v-tab-item>

  <v-tab href="#review">
    2019
  </v-tab>
  <v-tab-item value="review">
    <ObservationAaretsGang />
  </v-tab-item>

</v-tabs>

Answer 2

这对我有用

标签页

<template>
  <v-container>
    <v-card>
      <v-tabs v-model="tab" background-color="primary" dark>
        <v-tab v-for="item in items" :key="item.tab">
          {{ item.tab }}
        </v-tab>
      </v-tabs>
      <v-tabs-items v-model="tab">
        <v-tab-item v-for="item in items" :key="item.tab">
          <v-card flat>
            <v-card-text>
              <component v-bind:is="item.content"></component>
            </v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs-items>
    </v-card>
  </v-container>
</template>

<script>
import ComponentA from '@components/ComponentA';
import ComponentB from '@components/ComponentB';
export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      tab: null,
      items: [
        { tab: 'Component A', content: 'ComponentA' },
        { tab: 'Component B', content: 'ComponentB' }
      ]
    };
  }
};
</script>