我正在尝试创建一个基于 Vuetify 的自定义选项卡组件，但我无法让该组件识别items我定义的对象...对于 Vue 和 Vuetify 来说，我无法确定可能发生什么以及如何解决它。作为一个自定义组件，我不确定是否可以在像 codepen 这样的 IDE 上复制它来模拟它......
谁能协助告诉我如何修复此代码，以便items可以读取我的对象并将其呈现到选项卡中？
主调用页面（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>
组件（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>