Question

我正在使用vue.js和vuetify进行一些Web设计，并且在尝试显示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项没有正确地“连接”到v-tab，所以我看不到每个v-tab内的任何内容。

如果在v-tab之外使用，则每个相关组件的效果都很好。

Answer 1

这对我有用

Tabs.vue

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

Answer 2

删除v-tabs-items并将内容放入v-tabs元素内。

v-tabs
  v-tab
  v-tab-item

Answer 3

V2 https://v2.vuetifyjs.com/en/components/tabs/

TEST_DR %>% 
  group_by(YR, STATE, COUNTY) %>%
  count(CANCER, rand_num = sum(rand_num)) %>%
  pivot_wider(names_from = CANCER, values_from = n, values_fill = 0)

Vuetify-具有Vue组件的选项卡

3 个答案: