Tabs added programmatically wrong order

[matteopolati]

Hi, in my app i add tabs from web service through axios but tabs navigation order not respect the html generated order.
Any suggestions?

Thanx

[mdjaman]

Same issue. Any updates? Did you solve it? If so could you please share how u handle it

[matteopolati]

Unfortunately not..

[dany-eudes]

Maybe this issue. See: #229

[mdjaman]

Sure sorry i didn't post update. I successfully managed it, works great now

[dany-eudes]

@mdjaman, could you please explain your solution? That would help others. Thanks!

[mdjaman]

Sure but no real magic applied; i couldn't explain but one thing i did wrong is use a subcomponent as tabcontent. So wrap the looped subcomponent with <tab-content></tab-content> element!
Here a my component template

 <form-wizard ref="notificationForm"
                shape="circle"
                stepSize="xs"
                color="#3498db"
                title="Fiche de notification"
                :subtitle="epid"
                start-index.sync="stepIndex"
                nextButtonText="Suivant"
                backButtonText="Précédent"
                finishButtonText="Terminer"
                @on-error="handleErrorMessage"
                @on-complete="onComplete"
                @on-change="onChange">
    <tab-content v-for="(fieldset, index) in form"
                    :index="index"
                    :title="fieldset.label"
                    :key="fieldset.name"
                    :before-change="validateAsync">
        <b-alert variant="danger"
                    :show="errorMsg !== null">
            <p v-html="errorMsg"></p>
        </b-alert>
        <div class="row">
            <section-input v-for="input in fieldset.items"
                            :key="input.id"
                            :input="input">
            </section-input>
        </div>
    </tab-content>
</form-wizard>

Hope it helps

[dany-eudes]

Thank you, @mdjaman! We all appreciated.