vue.js 3 вкладки в 1 вкладке - PullRequest
Новая
       32

vue.js 3 вкладки в 1 вкладке

0 голосов
/ 05 июня 2019

У меня есть 3 вкладки на 1-м уровне, и я хочу добавить больше вкладок на 2-й вкладке.Я создал компонент vue Index.vue и добавил 3 вкладки.Оно работает.Но когда я добавил еще 3 вкладки из ArmorTams.vue, это не сработало.

результат работы: codeSandBox

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>

Ответы [ 2 ]

0 голосов
/ 05 июня 2019

помогает 

<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>
0 голосов
/ 05 июня 2019

В вашем компоненте 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>
...