根据所选选项卡更改当前组件内容

Question

我有一个带有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>

​

Answer 1

试着按照方法的思路使用一些东西。

根据我返回的内容，你必须改变一些东西，比如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>

Answer 2

我建议保持vuetify组件的作用域。文档显示您有三个组件可用于此基本选项卡组件。选项卡、选项卡和选项卡-item

因此，您可以使用对象和动态组件的列表执行以下操作：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>

​

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