Как я могу сделать это v-tabs Vuetify.работа компонента js?

Как я могу сделать это v-tabs Vuetify.работа компонента js?

31.12.2017 09:41:56 Просмотров 22 Источник

У меня есть этот 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>

Как отобразить отдельный блок данных на каждой вкладке?

У вопроса есть решение - Посмотреть?

Ответы - Как я могу сделать это v-tabs Vuetify.работа компонента js? / How can I make this v-tabs Vuetify.js component work?

Является ответом!
Chase Roberts

01.01.2018 02:33:12

Если вы хотите, чтобы все было абстрагировано в раздел 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>

https://stackoverflow.com/questions/48044943/how-can-i-make-this-v-tabs-vuetify-js-component-work/48046288#comment83069425_48046288
Спасибо большое, теперь я понимаю, как вкладки работают с петлей. Раньше я не мог понять, как пользоваться удостоверением личности. Спасибо
Ravi Anand

26.01.2019 02:19:02

можно также использовать привязку содержимого вкладки динамических компонентов. что дает вам больше гибкости и контроля.

Динамические компоненты Vue JS

Живой пример на JSFiddle

theshadog

28.01.2020 05:21:19

Для использования пользовательских компонентов внутри каждой вкладки в vuetify в 2020 году используйте:

   <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>
Закрыть X