如何让Vuetify.js的v-tabs组件各标签显示独立数据？

我在页面中添加了如下v-tabs组件，当前示例仅绑定了一段文本数据，三个标签均显示该文本内容：

<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. 修改数据结构 #

把原来分开的items和text合并成一个对象数组，每个对象包含标签标题和对应的专属内容：

export default {
  data () {
    return {
      tabs: [
        { title: 'Item One', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
        { title: 'Item Seventeen', content: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
        { title: 'Item Five', content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' }
      ]
    }
  }
}

2. 更新模板绑定 #

在模板里循环这个新的tabs数组，分别渲染标签标题和对应内容：

<template>
 <v-tabs fixed centered>
 <v-tabs-bar class="cyan" dark>
 <v-tabs-slider class="yellow"></v-tabs-slider>
 <!-- 循环渲染标签项，绑定每个tab的标题 -->
 <v-tabs-item 
   v-for="(tab, index) in tabs" 
   :key="index" 
   :href="'#tab-' + index"
 >
 {{ tab.title }}
 </v-tabs-item>
 </v-tabs-bar>
 <v-tabs-items>
 <!-- 循环渲染标签内容，绑定每个tab的专属内容 -->
 <v-tabs-content 
   v-for="(tab, index) in tabs" 
   :key="index" 
   :id="'#tab-' + index"
 >
 <v-card flat>
 <v-card-text>{{ tab.content }}</v-card-text>
 </v-card>
 </v-tabs-content>
 </v-tabs-items>
 </v-tabs>
</template>

小优化（可选） #

如果担心用index作为key不够稳妥（比如后续会调整标签顺序），可以给每个tab对象加一个唯一ID字段：

tabs: [
  { id: 'tab-one', title: 'Item One', content: '第一个标签的专属内容' },
  { id: 'tab-seventeen', title: 'Item Seventeen', content: '第二个标签的专属内容' },
  { id: 'tab-five', title: 'Item Five', content: '第三个标签的专属内容' }
]

然后模板里的key、href和id都换成这个唯一ID：

<v-tabs-item 
  v-for="tab in tabs" 
  :key="tab.id" 
  :href="'#' + tab.id"
>
{{ tab.title }}
</v-tabs-item>

<!-- 内容部分同理 -->
<v-tabs-content 
  v-for="tab in tabs" 
  :key="tab.id" 
  :id="tab.id"
>
<v-card flat>
<v-card-text>{{ tab.content }}</v-card-text>
</v-card>
</v-tabs-content>

这样每个标签就会显示自己独有的数据块啦！

内容的提问来源于stack exchange，提问作者Un1