CODEWITHSUNDEEP
javascriptvue.jsvuetify.jsconditional-rendering
C-Jay
C-Jay

Reputation: 681

Nested v-tabs: Conditionally render the child tabs in order to show slider

I use nested tabs and have problems displaying active tabs.

As described in this bug report, the tab slider of the nested tabs is only displayed after you have clicked on it.

Conditional rendering is suggested as a solution. I have already tried some solutions, but I don't get a working result.

Reproduction Link: https://codesandbox.io/s/xr7q9zl1qo

I am grateful for any help.

Upvotes: 3

Views: 3060

Answers (1)

C-Jay
C-Jay

Reputation: 681

Conditional rendering must be done on the basis of the parent. The v-tabs v-model of the parent tab must be compared to the index from the v-for loop of the v-tab-item of the parent.

In this case:

v-if="activeClass === index"

Example:

<template>
<div id="app">
<v-tabs v-model="activeClass" slider-color="blue">
  <v-tab v-for="n in classTypes" :key="n.id" ripple>{{ n.text }}</v-tab>
  <v-tab-item v-for="(n, index) in classTypes" :key="n.id">
    <v-tabs v-model="activeTab[index]" slider-color="blue" v-if="activeClass === index">
      <v-tab>First child</v-tab>
      <v-tab>Second child</v-tab>
    </v-tabs>
  </v-tab-item>
</v-tabs>
</div>
</template>

<script>
export default {
 name: "App",
 data() {
  return {
    classTypes: [{ id: 1, text: "First" }, { id: 2, text: "Second" }],
    activeClass: "1",
    activeTab: []
  };
 }
};
</script>

Reproduction link: https://codesandbox.io/s/lykynjn6vm

Upvotes: 1

Related Questions