Question

我在第一级有3个标签，并且我想在第二级中添加更多标签。我创建了一个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>

Answer 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>

Answer 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>

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

2 个答案: