Incorrect tab order on show/hide tabs.

[jcuribe]

I added some more tabs today (index6 and index7) and could not get the display order I wanted, I was using the following (https://jsfiddle.net/vuxdph91/)

<tab-content v-for="tab in tabs"
                     v-if="!tab.hide"
                     :key="tab.index"
                     :title="tab.title"
                     :docType="this.docType">
            <component :is="tab.component"></component>
</tab-content>

using this tabs array.

                    {index:1, title: 'Transacción', component: 'step1'},
                    {index:2, title: 'Documentos', component: 'step2'},
                    {index:3, title: 'Aprobadores', component: 'step3', hide:true},
                    {index:4, title: 'Firmantes', component: 'step4'},
                    {index:5, title: 'Posicionar Firmas', component: 'step5'},
                    {index:6, title: 'Llenar Formularios', component: 'step6', hide: true},
                    {index:7, title: 'Observaciones Documentos', component: 'step7', hide: true},
                    {index:8, title: 'Resumen y Distribución', component: 'step8', hide: false},

When I displayed index 6 it appeared last (after 'Resumen y Distribucion'), If I then hid index8 and displayed it again it would render in the desiered order. The same with index7, initially I thought it had to do with the use of accents. Played arround with using a sort order function (did not help), and also adding index attribute and using it for the key(did not fix) I actually am thinking it is a bug in vue... but don't have enough knowledge to debug this component or vue. If anyone is up for the challenge...

I found this to work. Created a computed value like this:

       displayTabs: function (){
             return this.tabs.filter(function (tab){
                    return tab.hide !== true
                 })
          } ,

and modified the tab-component like this:

<tab-content v-for="tab in displayTabs"
                     :key="tab.index"
                     :title="tab.title"
                     :docType="this.docType">
            <component :is="tab.component"></component>

[Waynestay]

Hi, Not sure if you managed to fix this but I had the same issue and eventually gave up trying to hide the tab. I copied my code into one of the demo's and it worked as expected but could not get it to work in my code and it still displayed the tabs out of order when unhiding. I then grabbed the latest version of the form wizard from npm but still had the issue so wondering if this may have been fixed but not updated in the npm build? The strange thing is if I log the tabs object, it is in the right order, so must be something to do with the routing?

[jcuribe]

yes. I got it working. just look at the last part of my message... create a computed property, where you filter and then v-for over the computed.

[yogithesymbian]

i cant solve i already use computed...

computed: {
    permissionCreateTB() {
      return (any) => {
        return (
          form.schedule.test === 'x x' ||
          form.schedule.test === 'y y'
        )
      }
    },
    permissionCreate() {
      return (any) => {
        return (
          form.schedule.test && form.schedule.test !== 'z'
        )
      }
    },
permissionAdminTenant() {
      /* admin tenant => yes  */
      /* tenant       => no */
      /* sal          => yes */

      // !$can('manage', 'all') && $can('manage', 'special')
      const hostCanModified = this.$can('manage', 'all')
      const adminSAL = this.$can('YYY', '')
      const adminTenantModified = this.$can('manage', 'special')

      const condition = this.isExistDetailID
        ? /* on details data */ hostCanModified ||
          adminSAL ||
          adminTenantModified
        : /* on create | skip */ false
      return () => condition
    },

i have b-tab looks like these

<tab-content // tabs 1
          v-if="permissionCreateTB()"
          :title="wizard.second.step1.title"
          :icon="wizard.second.step1.icon"
        />
<tab-content // tabs2
          v-if="permissionCreate()"
          :title="wizard.second.step2.title"
          :icon="wizard.second.step2.icon"
        />
<tab-content // tabs2.1
          v-if="false"
          :title="'hide'"
          :icon="'hide'"
        />
<tab-content // tabs3
          v-if="permissionAdminTenant()"
          :title="wizard.second.step3.title"
          :icon="wizard.second.step3.icon"
        />

but the order is wrong, the result is

tabs3
tabs1
tabs2

what i expected is

tabs1
tabs2
tabs3

but when the tabs2.1 is true, the order is correct...

[yogithesymbian]

i have solve manualy order by

const { tabs } = this.$refs.wizardFirst

then

this.$refs.wizardFirst.tabs = tabs.sort(
          (a, b) => a.tabId.slice(-1) - b.tabId.slice(-1)
        ) // b - a for reverse sort
// in here i have tabId look like these
{
 uuid: xxx1
 tabId: account1
}
{
 uuid: xx4,
 tabId: profile4
}
{
 uuid : xx9,
 tabId: setting2
}
{
 uuid : x12,
 tabId: system3
}

when i print the tabs order has wrong uuid but the tabId is correct, so we need manual order by the code .