0

我有一个带有 v-tabs 的组件。我正在尝试根据所选选项卡更改选项卡元素之外的 div 的内容，但我不知道如何完成它。就像我需要在组件中使用 v-router 并为每个选项卡提供不同的 href。我不希望内容包含 v-tab-item。我想像导航栏一样使用标签

我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<v-tabs v-model="tab" class="elevation-2" dark :centered="true" :grow="true">
    <v-tabs-slider></v-tabs-slider>
    <v-tab v-for="i in tabs" :key="i" :href="`#tab-${i}`">{{ i }}</v-tab>
</v-tabs>
 <div>
     <!-- Change selected component according to selected tab -->
    <ChildComponentOne/>
    <ChildComponentTwo/>
    <ChildComponentThree/>
 </div>


<script>
data() {
    return {
      tabs: ["ChildOne", "ChildTwo", "ChildThree"],
    };
  },
</script>

4

2 回答 2

0

我建议保持 vuetify 组件的范围。该文档显示您可以将三个组件用于此基本选项卡组件。选项卡、选项卡和选项卡项

所以你可以用对象和动态组件列表做这样的事情： https ://vuejs.org/v2/guide/components-dynamic-async.html

<v-tabs v-model="tab" class="elevation-2" dark :centered="true" :grow="true">
    <v-tabs-slider></v-tabs-slider>
    <v-tab v-for="(item, index) in tabs" :key="index" :href="`#tab-${index}`">{{ item.name }}</v-tab>

 <v-tab-item v-for="(item, i) in tabs" :key="index" :value="'tab-' + index">
     <Component :is="item.component"></Component>
 </v-tab-item>

</v-tabs>

<script>
// Import your childcomponents
data() {
    return {
    tabs: [
    { name: "ChildOne", component: "ChildComponentOne" },
    { name: "ChildTwo", component: "ChildComponentTwo" },
    { name: "ChildThree", component: "ChildComponentThree" },
    ],
  },
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

我没有测试过这段代码，但我想你明白了

于 2020-07-21T07:21:22.490 回答
0

尝试使用类似方法的东西。

根据我返回的内容，您必须更改一些内容，例如 v-if。有很多方法可以做你想做的事，我给了你一个非常面包和黄油的答案，让你朝着正确的方向前进。

<v-tabs v-model="tab" class="elevation-2" dark :centered="true" :grow="true">
    <v-tabs-slider></v-tabs-slider>
    <v-tab v-for="i in tabs" :key="i" :href="`#tab-${i}`" @click="tabs(i)">{{ i }}</v-tab>
</v-tabs>
 <div>
     <!-- Change selected component according to selected tab -->
   <div v-if="selectedTab === 1">
    <ChildComponentOne/>
   </div>
   <div v-if="selectedTab === 2">
    <ChildComponentTwo/>
   </div>
   <div v-if="selectedTab === 3">
    <ChildComponentThree/>
   </div>
 </div>


<script>
data() {
    return {
      tabs: ["ChildOne", "ChildTwo", "ChildThree"],
      selectedTab: null,
    };
  },
methods: {
    tabs(tab) {
      this.selectedTab = tab
    },
}
</script>
于 2020-07-21T07:03:59.700 回答