I'm trying to create a custom tab component based on Vuetify but I'm having trouble trying to get the component to recognize the items object I've defined... Being quite new to Vue and Vuetify, I'm not able to determine what could be happening and how to resolve it. Being a custom component, I'm not sure if I can replicate it on an IDE like codepen to simulate it...
Could anyone please assist with telling me how to fix this code such that my items object can be read and rendered into tabs?
The main calling page (Demo.vue):
<template>
<div>
<v-row>
<v-col cols="9">
<v-container>
<h2 class="mt-6 mb-2">
Demo
</h2>
<p class="pt-5">Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Vero temporibus repudiandae, quia consequatur, aperiam reiciendis sint eos cum voluptas sunt, libero aliquid cumque iste, accusantium quam assumenda illo quas eum.</p>
<v-row class="pa-5 d-flex justify-center">
<TabNavigation v-model="tab"/>
</v-row>
<p class="pt-5">Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt consequuntur dolores modi perspiciatis iste? Reprehenderit odio illo eligendi fugit cumque dolor, debitis quidem quod illum repellendus veritatis, veniam, maiores labore.</p>
</v-container>
</v-col>
</v-row>
</div>
</template>
<script>
import TabNavigation from './TabNavigation-temp';
export default {
name: "Demo",
data () {
return {
tab: 1,
items: [
{ tab: 'One', content: 'Tab 1 Content' },
{ tab: 'Two', content: 'Tab 2 Content' },
{ tab: 'Three', content: 'Tab 3 Content' },
{ tab: 'Four', content: 'Tab 4 Content' },
{ tab: 'Five', content: 'Tab 5 Content' },
{ tab: 'Six', content: 'Tab 6 Content' },
{ tab: 'Seven', content: 'Tab 7 Content' },
{ tab: 'Eight', content: 'Tab 8 Content' },
{ tab: 'Nine', content: 'Tab 9 Content' },
{ tab: 'Ten', content: 'Tab 10 Content' }
],
}
},
components: {
TabNavigation
}
};
</script>
<style>
</style>
The component (TabNavigaton-temp.vue):
<template>
<v-card>
<v-tabs
v-model="tab"
v-bind="$attrs"
:align-with-title="alignWithTitle"
:background-color="backgroundColor"
:center-active="centerActive"
:color="color"
:fixed-tabs="fixedTabs"
:grow="grow"
:icons-with-text="iconsWithText"
:next-icon="nextIcon"
:prev-icon="prevIcon"
:right="right"
:show-arrows="showArrows"
:slider-color="sliderColor"
:vertical="vertical"
>
<v-tab
v-for="(item, i) in items"
:key="i"
>
{{ item.tab }}
</v-tab>
</v-tabs>
<v-tabs-items v-model="tab">
<v-tab-item
v-for="(item, i) in items"
:key="i"
>
<v-card flat>
<v-card-text>{{ item.content }}</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card>
</template>
<script>
export default {
name: "TabNavigation",
data() {
return {
tab: null
};
},
props: {
alignWithTitle: {
type: Boolean,
default: false
},
backgroundColor: {
type: String,
default: "transparent" // default background color used in tabs within ADS documentation
},
centerActive: {
type: Boolean,
default: false
},
color: {
type: String,
default: "#121212" // default foreground color used in tabs within ADS documentation
},
fixedTabs: {
type: Boolean,
default: false
},
grow: {
type: Boolean,
default: false
},
iconsOnly: {
type: Boolean,
default: false
},
iconsWithText: {
type: Boolean,
default: false
},
items: {
type: Array,
default: () => [],
},
nextIcon: {
type: String,
default: null
},
prevIcon: {
type: String,
default: null
},
right: {
type: Boolean,
default: false
},
showArrows: {
type: Boolean,
default: false
},
sliderColor: {
type: String,
default: "#CE0037" // default slider color used in tabs within ADS documentation
},
vertical: {
type: Boolean,
default: false
}
},
computed: {
},
methods: {
},
created() {
}
}
</script>
<style scoped>
</style>
