vue.js 1 个标签中的 3 个标签答案

【问题标题】：vue.js 3 tabs in a 1 tabvue.js 1 个标签中的 3 个标签
【发布时间】：2019-06-05 07:30:39
【问题描述】：

我在 1 级有 3 个选项卡，我想在 2 级选项卡中添加更多选项卡。我创建了一个 vue 组件 Index.vue 并添加了 3 个选项卡。有用。但是当我从 ArmorTams.vue 添加 3 个标签时，它不起作用。

Index.vue

<template>
<v-app>
    <v-tabs grow v-model="active_tab">
        <v-tab
                v-for="tab of tabs"
                :key="tab.index"
                :title="tab"
        >
            {{tab.name}}
        </v-tab>
        <v-tab-item v-for="(tab, index) in tabs" :key="index">
            {{tab.content}}
        </v-tab-item>
    </v-tabs>
</v-app>

<script>
    import ArmorTabs from "components/helper/ArmorTabs.vue"

    export default {
        components:{
            ArmorTabs
        },
        data: () => ({
            active_tab: 1,
            tabs: [
                { index: 0, name: 'MAIN', content: "123" },
                { index: 1, name: 'ARMORS', content: ArmorTabs },
                { index: 2, name: 'WEAPONS', content: "789"  }
            ]
        })
    }
</script>

ArmorTabs.vue 是一样的。我尝试添加内容：ArmorTabs

<template>
<v-app>
    <v-tabs grow v-model="active_tab">
        <v-tab
                v-for="tab of tabs"
                :key="tab.index"
        >
            {{tab.name}}
        </v-tab>
        <v-tab-item v-for="(tab, index) in tabs" :key="index">
            {{tab.content}}
        </v-tab-item>
    </v-tabs>
</v-app>

<script>
    export default {
        data: () => ({
            tabs: [
                { index: 5, name: 'MAIN', content: "123" },
                { index: 6, name: 'ARMORS', content: "456"  },
                { index: 7, name: 'WEAPONS', content: "789"  }
            ]
        })
    }
</script>

【问题讨论】：

请提供minimal reproducible example。如果您发现难以在 Stack Overflow 上重现，请使用 codesandbox.io（或类似网站）。
我很抱歉，我补充说。我应该删除代码示例吗？
您添加的代码框不起作用。确保每个文件都已保存。最好的检查方法是在隐身窗口中打开它。不，您不应该删除代码示例，因为它们与您的问题相关（即使没有代码框也需要有意义）。
codesandbox 的链接已修复

标签： vue.js tabs components

【解决方案1】：

您的 ArmorTabs.vue 组件中没有定义 active_tab。

还有一件事：不要在 Vue 的实例属性上使用箭头函数。

<script>
    export default {
        data() {
            return {
                active_tab: 5, // ------ add this
                tabs: [
                    { index: 5, name: 'MAIN', content: "123" },
                    { index: 6, name: 'ARMORS', content: "456"  },
                    { index: 7, name: 'WEAPONS', content: "789"  }
                ]
            }
        }
    }
</script>

【讨论】：

它不起作用。我认为，我在 index.vue { index: 1, name: 'ARMORS', content: ArmorTabs } 中添加了错误的这一部分

【解决方案2】：

有帮助

<v-tab-item v-for="(tab, name) in tabs" :key="name">
    <div v-if='tab.name == "ARMORS"'>
        <ArmorTabs/>
    </div>
    <div v-else>
        {{ tab.content }}
    </div>
</v-tab-item>

【讨论】：