Uncaught (in promise) TypeError: this.$refs['tabs-bar'] is undefined

[agmeeder]

I'm using the w-tabs with dynamic loading of a component for every tab. It works but there is an Error in console.log:

Uncaught (in promise) TypeError: this.$refs['tabs-bar'] is undefined updateSlider wave-ui.es.js:1 beforeMount wave-ui.es.js:1 (wave-ui.es.js:1:114985)

This is my Vue 3 code (typescript with script-setup) for my 'AppSettings.vue' component:

<template>
  <w-card title="Application Settings" title-class="title" class="br-font sh2">
    <w-tabs :items="tabs" fill-bar>
      <template #item-title="{ item }">
        <span class="primary br-font uppercase">
          {{ item.title }}
        </span>
      </template>

      <template #item-content="{ index }">
        <component :is="loadComponent(index)" />
      </template>
    </w-tabs>
  </w-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import GeneralSettings from './GeneralSettings.vue'
import LibrixSettings from './LibrixSettings.vue'
import ItrackSettings from './ItrackSettings.vue'

const tabs = ref([{ title: 'General' }, { title: 'Librix' }, { title: 'Itrack' }])

const loadComponent = (index: number) => {
  switch (index) {
    case 1:
      return GeneralSettings
    case 2:
      return LibrixSettings
    case 3:
      return ItrackSettings
  }
}
</script>

[antoniandre]

Hi @agmeeder, Sorry I missed your issue 😅 I've double-checked the same setup and could not see the error. But in case that would still happen, I am now checking if the ref is really existing. in version 2.28.1. Please reopen if not solved! :)

[agmeeder]

Thanks for your answer and the effort. The problem is solved.