Vue+Vuetify使用v-tab实现不同标签页展示对应内容的问题

直接按以下步骤修改即可实现3个标签页各展示专属句子列表，后续新增标签也无需调整模板逻辑，只需修改配置项。

完整修改后代码 #

<template>
    <div id = "vaults" >
    
    <v-row class="justify-center">
      <v-card class="card">

          <div class="text-center card-title py-6">
            <h2>
              TAB_TITLE
            </h2>
          </div>

          <v-tabs
            v-model="tab"
            background-color="$peru"
            color="card"
            grow
          >
            <v-tab
              v-for="(item, index) in tabList"
              :key="index"
            >
              {{ item.tabName }}
            </v-tab>
          </v-tabs>

          <v-tabs-items v-model="tab">
            <v-tab-item
              v-for="(item, index) in tabList"
              :key="index"
            >
              <v-card
                class="card"
                flat
              >
                <v-card-text>
                  <!-- 循环渲染当前标签的专属句子列表 -->
                  <p v-for="(sentence, idx) in item.contentList" :key="idx">
                    {{ sentence }}
                  </p>
                </v-card-text>
              </v-card>
            </v-tab-item>
          </v-tabs-items>

        </v-card>
    </v-row>

  </div>
</template>

<script>

  export default {

    components: {
    },

    data: function() {
      return {
        tab: null,
        // 重构为对象数组，标签名和对应内容绑定，新增标签直接追加项即可
        tabList: [
          {
            tabName: 'Vault-1',
            contentList: ['checkcheckcheck', 'Vault-1专属句子1', 'Vault-1专属句子2']
          },
          {
            tabName: 'Vault-2',
            contentList: ['savesavesave', 'Vault-2专属句子1']
          },
          {
            tabName: 'Vault-3',
            contentList: ['Vault-3句子1', 'Vault-3句子2', 'Vault-3句子3']
          }
        ]
      }
    },

    methods:{
      getImgUrl: function (path) { 
        return require('@/assets/' + path);
      }
    }

  }

</script>

核心修改说明 #

• 废弃原来分散的items、texts数组，改用对象数组统一管理标签配置，避免标签和内容顺序错位问题
• 模板中标签和内容区统一循环同一个配置数组，保证一一对应
• 内容区嵌套循环每个标签的专属句子列表，可自定义列表渲染样式，支持任意数量的句子配置
• 后续新增标签只需在tabList中追加对应配置项即可，无需修改模板逻辑

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