이 v-tabs Vuetify.js 컴포넌트를 작동시키려면 어떻게 해야 합니까?

이 v-tabs Vuetify.js 컴포넌트를 작동시키려면 어떻게 해야 합니까?

나 이거 있어 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>

각 탭에 개별 데이터 블록을 표시하려면 어떻게 해야 합니까?

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>

모든 것을 추상화해서datahttps://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>

를 사용할 수도 있습니다.dynamic component탭 콘텐츠바인딩유연성과 제어력이 향상됩니다.

Vue JS 동적 구성 요소

JSFiddle에서의 라이브 예시

언급URL : https://stackoverflow.com/questions/48044943/how-can-i-make-this-v-tabs-vuetify-js-component-work