mattmaribojoc / learn-vue-tab Goto Github PK

To make it work wit vue 3.4 and setup sugar syntax, i've updated the script as follow:

<script setup lang="ts">
import { computed, provide, ref, useSlots } from "vue";

const slots = useSlots();

const tabTitles = computed(
  () =>
    slots.default &&
    (slots!.default()[0].children as any)!.map((t: any) => t.props.title)
);

const selectedTiltle = ref(tabTitles.value[0]);

provide("selectedTitle", selectedTiltle);
</script>

i didn't test it with named slots or other use cases, but it works in my project
hope this heps.

First off thank you, I like the way you approached creating tabs, however there are a couple issues.

This tabs component is not accessible at all. Here is a fiddle from W3 which can help you to make this accessible. If you're open to me submitting a PR addressing these issues I would be happy to do that too, however, this guide on LearnVue.co also needs to be updated.

Additionally in your example on LearnVue you are missing a comma in this code snippet that prevents it from compiling (this is in a few sections on the tutorial):

<script>
  export default {
    data () {
      return {
        selectedIndex: 0 // <-- missing comma
        tabs: [],        // all of the tabs
      }
    }
  }
</script>

Another issue is difficult to notice on the surface, however, in the Tab.vue you have the title prop as not required with a default title of 'Tab' and then in the Tabs.vue you have a v-for with the key set to the title like this: :key='tab.title'. Obviously the tab title is not guaranteed to be unique. An easy fix is to make it a required prop, but even then it's still not guaranteed, though I'm struggling to think of a real life scenario where you would have two or more identically named tabs. You could also just use something like :key="`tab-${index}`".

Finally you may want to consider scoping your CSS and talking about the benefits of doing that. In this scenario if someone has an existing <ul><li class="tab"></li></ul> in their code then it will have conflicts, but this isn't necessary as it's more of an opinion based thing.

Hello, I have followed the tutorial thoroughly, but the tab titles aren't displaying. I've tried copying whole files as well, but still without any result. Any idea what might be causing it or how to fix this?

Is possible to programmatically open a tab?

I need to make a link that would open an specific tab but I didn't found a way to do that.

Thanks!