Unveiling the Key to Utilizing $children in Vue 3 to Develop a Tabs Component

Question

Unveiling the Key to Utilizing $children in Vue 3 to Develop a Tabs Component

I am currently working on developing a Tabs component using Vue 3, similar to the one discussed in this relevant question.

<tabs>
   <tab title="one">content</tab>
   <tab title="two" v-if="show">content</tab> <!-- encountering issues here -->
   <tab :title="t" v-for="t in ['three', 'four']">{{t}}</tab> <!-- facing challenges here as well -->
   <tab title="five">content</tab>
</tabs>

Regrettably, the suggested solution does not function properly when there are dynamic Tabs inside, such as when there is a v-if condition or when the Tabs are rendered using a v-for loop - it fails to work.

To further illustrate my issue, I have provided a Codesandbox demonstration with .vue files:

https://codesandbox.io/s/sleepy-mountain-wg0bi?file=%2Fsrc%2FApp.vue

https://i.sstatic.net/EVwsr.png

I attempted to use onBeforeUpdate similarly to onBeforeMount, but unfortunately, that did not yield the desired results. In fact, although it did add new tabs, the tab order was altered.

The main challenge appears to be the inability to access or modify child data from the parent component in Vue 3 (similar to how it was done with $children in Vue 2.x). While someone recommended utilizing this.$.subtree.children, it was strongly discouraged and did not address my issue regardless of how I implemented it.

If anyone could provide guidance on how to make the Tab components inside Tabs reactive and update accordingly with v-if conditions, it would be greatly appreciated.

javascript vue.js vue-component vuejs3

Answer 1

Answer №1

It seems the issue lies in using the item index as the v-for loop's key.

The main problem is that you've applied v-for's key on a child element instead of the parent (specifically, on the <li> element).

<li v-for="(tab, i) in tabs">
  <a :key="i"> ❌
  </a>
</li>

Furthermore, if items can be rearranged or removed from the backing array used in v-for, using the item index as the key may lead to issues with unique values. For example, removing an item could shift other items up in the list, causing a key clash and preventing proper re-rendering.

A better approach would be to use a unique identifier for each tab, such as the tab's title value. Below is the updated Tab.vue component:

// Tab.vue
export default {
  props: ["title"], 👈
  setup(props) {
    const isActive = ref(false)
    const tabs = inject("TabsProvider")

    watch(
      () => tabs.selectedIndex,
      () => {
        isActive.value = props.title === tabs.selectedIndex
      }                        👆
    )

    onBeforeMount(() => {
      isActive.value = props.title === tabs.selectedIndex
    })                       👆

    return { isActive }
  },
}

Update your Tabs.vue template to utilize the tab's title as the key:

<li class="nav-item" v-for="tab in tabs" :key="tab.props.title">
  <a                                                     
    @click.prevent="selectedIndex = tab.props.title"
    class="nav-link"                          
    :class="tab.props.title === selectedIndex && 'active'"
    href="#"          
  >
    {{ tab.props.title }}
  </a>
</li>

Check out the demo

Answer 2

It seems the issue lies in using the item index as the v-for loop's key.

The main problem is that you've applied v-for's key on a child element instead of the parent (specifically, on the <li> element).

<li v-for="(tab, i) in tabs">
  <a :key="i"> ❌
  </a>
</li>

Furthermore, if items can be rearranged or removed from the backing array used in v-for, using the item index as the key may lead to issues with unique values. For example, removing an item could shift other items up in the list, causing a key clash and preventing proper re-rendering.

A better approach would be to use a unique identifier for each tab, such as the tab's title value. Below is the updated Tab.vue component:

// Tab.vue
export default {
  props: ["title"], 👈
  setup(props) {
    const isActive = ref(false)
    const tabs = inject("TabsProvider")

    watch(
      () => tabs.selectedIndex,
      () => {
        isActive.value = props.title === tabs.selectedIndex
      }                        👆
    )

    onBeforeMount(() => {
      isActive.value = props.title === tabs.selectedIndex
    })                       👆

    return { isActive }
  },
}

Update your Tabs.vue template to utilize the tab's title as the key:

<li class="nav-item" v-for="tab in tabs" :key="tab.props.title">
  <a                                                     
    @click.prevent="selectedIndex = tab.props.title"
    class="nav-link"                          
    :class="tab.props.title === selectedIndex && 'active'"
    href="#"          
  >
    {{ tab.props.title }}
  </a>
</li>

Check out the demo

Answer 3

Answer №2

This amazing solution was shared by @anteriovieira on the Vuejs forum and seems to be the perfect way to tackle the issue at hand. The key element that was missing in this puzzle was utilizing getCurrentInstance within the setup function.

To see the complete working code, simply click on this link:

https://codesandbox.io/s/vue-3-tabs-ob1it

I felt compelled to include it here for anyone who stumbles upon this page via Google while searching for a similar solution.

Answer 4

This amazing solution was shared by @anteriovieira on the Vuejs forum and seems to be the perfect way to tackle the issue at hand. The key element that was missing in this puzzle was utilizing getCurrentInstance within the setup function.

To see the complete working code, simply click on this link:

https://codesandbox.io/s/vue-3-tabs-ob1it

I felt compelled to include it here for anyone who stumbles upon this page via Google while searching for a similar solution.

Answer 5

Answer №3

By utilizing the accessible slots as $slots in the template (refer to the Vue documentation), you have the option to implement the following:

// Tabs component

<template>
  <div v-if="$slots && $slots.default && $slots.default()[0]" class="tabs-container">
    <button
      v-for="(tab, index) in getTabs($slots.default()[0].children)"
      :key="index"
      :class="{ active: modelValue === index }"
      @click="$emit('update:model-value', index)"
    >
      <span>
        {{ tab.props.title }}
      </span>
    </button>
  </div>
  <slot></slot>
</template>

<script setup>
  defineProps({ modelValue: Number })

  defineEmits(['update:model-value'])

  const getTabs = tabs => {
    if (Array.isArray(tabs)) {
      return tabs.filter(tab => tab.type.name === 'Tab')
    } else {
      return []
    }
</script>

<style>
...
</style>

An example of the Tab component could be:

// Tab component

<template>
  <div v-show="active">
    <slot></slot>
  </div>
</template>

<script>
  export default { name: 'Tab' }
</script>

<script setup>
  defineProps({
    active: Boolean,
    title: String
  })
</script>

To put it all together with an array of objects representing sections each with a title and a component:

...
<tabs v-model="active">
  <tab
    v-for="(section, index) in sections"
    :key="index"
    :title="section.title"
    :active="index === active"
  >
    <component
      :is="section.component"
    ></component>
  </app-tab>
</app-tabs>
...
<script setup>
import { ref } from 'vue'

const active = ref(0)
</script>

Answer 6

By utilizing the accessible slots as $slots in the template (refer to the Vue documentation), you have the option to implement the following:

// Tabs component

<template>
  <div v-if="$slots && $slots.default && $slots.default()[0]" class="tabs-container">
    <button
      v-for="(tab, index) in getTabs($slots.default()[0].children)"
      :key="index"
      :class="{ active: modelValue === index }"
      @click="$emit('update:model-value', index)"
    >
      <span>
        {{ tab.props.title }}
      </span>
    </button>
  </div>
  <slot></slot>
</template>

<script setup>
  defineProps({ modelValue: Number })

  defineEmits(['update:model-value'])

  const getTabs = tabs => {
    if (Array.isArray(tabs)) {
      return tabs.filter(tab => tab.type.name === 'Tab')
    } else {
      return []
    }
</script>

<style>
...
</style>

An example of the Tab component could be:

// Tab component

<template>
  <div v-show="active">
    <slot></slot>
  </div>
</template>

<script>
  export default { name: 'Tab' }
</script>

<script setup>
  defineProps({
    active: Boolean,
    title: String
  })
</script>

To put it all together with an array of objects representing sections each with a title and a component:

...
<tabs v-model="active">
  <tab
    v-for="(section, index) in sections"
    :key="index"
    :title="section.title"
    :active="index === active"
  >
    <component
      :is="section.component"
    ></component>
  </app-tab>
</app-tabs>
...
<script setup>
import { ref } from 'vue'

const active = ref(0)
</script>

Unveiling the Key to Utilizing $children in Vue 3 to Develop a Tabs Component

Answer №1

Answer №2

Answer №3

Similar questions

Adding hidden elements with jQuery: A comprehensive guide

Combining array of objects by various identifiers

What's the best way to implement asynchronous state updating in React and Redux?

Looking for a way to access the source code of a QML method in C++?

Unable to backtrack once a response has been sent

Extracting text from an array within Meteor

Asynchronous NestJs HTTP service request

Connection closure causing chaos in MongoDB structure

jQuery unable to target Bootstrap button

Deliberately "locking" a JavaScript variable with a immediately-invoked function expression

Preventing PCs from accessing a specific webpage: A step-by-step guide

Sending chosen choice to controller method

What is the process for a webpage to save modifications made by JavaScript?

Tips on modifying the interface based on the selected entry using jQuery

Next.js v13 and Firebase are encountering a CORS policy error which is blocking access to the site.webmanifest file

Roundabout Navigation Styles with CSS and jQuery

Issue with Sequential Drop Down List Functionality in ASP.Net MVC View Page

Encountering a TypeError with react-rte in Next.js: r.getEditorState is not a valid function

Filtering options in a dropdown box with jQuery

Having trouble getting the timer function to execute upon page load in JavaScript