Tabs are not displayed in the order in which I created them

[VivPat]

Good day,

Sorry to bother but I am trying out your project, which is great by the way, within a Laravel 5.3 project but I am having an issue with the tabs component.

I have added three tabs

<tabset v-if="contentVisible" transition="slideOut">
    <tab>
        <header>
            Details
        </header>

        <p>'Details' tab content section</p>
    </tab>
    <tab v-if="data.downloads.length !== 0">
        <header>
            Downloads
        </header>

        <p>'Downloads' tab content section</p>
    </tab>
    <tab v-if="data.images.length !== 0" :on-selected='gallerySelected'>
        <header>
            Gallery
        </header>

        <p>'Gallery' tab content section</p>
    </tab>
</tabset>

However, when displayed within a browser the 'Details' tab is displayed as the third tab instead of as the first tab.

Any assistance would be truly greatful.

As a side note, using bootstrap directly the tab ordering works as expected.

[VivPat]

Please note that for now as I needed to have the tabs ordered, I changed the components in the following way.

1. I have added a required 'order' property to the 'tab' component

   props: {
   header: {
       type: String
   },
   disabled: {
       type: Boolean,
       default: false
   },
   onSelected: {
       type: Function,
       default: function _default() {}
   },
   order: {
       type: Number,
       required: true
   }
   }

2. Within the 'tabset' component I have changed the 'registerTab' function to use the 'order' property when setting the tabs 'id' and in order to insert the tab into the correct place within the 'tabs' array

   registerTab: function registerTab(tab) {
   tab.id = tab.order;
   tab.active = tab.order === 0;
   
   this.tabs.splice(tab.order, 0, tab);
   }

I will remove this modification once I have heard from you.

Thanks

[Morgul]

I'm not sure that an order should be required here. The tabs should be registered in the order specified, however I'm relying on the DOM and VueJS to handle that. What probably needs to happen is that instead of the current tab registration mechanism, I need to have the tabset walk it's children, and collect the tabs that way. I was trying to be a bit clever, and it bit me.

I can walk you through what would need to be done, and then take a PR. There's a lot of cleanup this project needs, to be honest, and I'm not actively using it anymore, so it's fallen by the wayside. I apologize about that.

[Morgul]

For posterity, the current tab mechanism is this:

A tab registers itself with the tabset, at compile time:

https://github.com/Morgul/vueboot/blob/master/src/tabs/tab.vue#L47

The tabset pushes the tabs into it's internal list in the order register is called:

https://github.com/Morgul/vueboot/blob/master/src/tabs/tabset.vue#L79

This should probably be the tabset generating the list by checking the names of it's children components, via: http://v1.vuejs.org/api/#vm-children.