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

Posted 2023-02-16

【中文标题】如何使这个 v-tabs Vuetify.js 组件工作？

【英文标题】：How can I make this v-tabs Vuetify.js component work?

【发布时间】：2018-06-11 05:06:57

【问题描述】：

我在页面上添加了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>

如何在每个选项卡中显示单独的数据块？

【参考方案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>

【讨论】：

耶稣，为什么很难找到一个实际有效的简单示例？谢谢。

这需要添加到 vuetify 文档中

【参考方案2】：

您还可以使用dynamic component 选项卡内容绑定。这为您提供了更大的灵活性和控制力。

Vue JS Dynamic Components

Live Example on JSFiddle

【参考方案3】：

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

【讨论】：

非常感谢，现在我了解了标签如何与循环一起工作。之前，我不太明白如何使用 id。谢谢