Generate steps with v-for

[gazben]

Hi,

When I use v-for to generate the steps I end up with the steps mixed up. The generated ones are always the last.

        <tab-content  title="Hello" icon="fa fa-key"></tab-content>
          <tab-content
            v-for="(item, index) in pages"
            v-bind:item="item"
            v-bind:index="index"
            v-bind:key="item.id"
            :title="item.title" icon="fa fa-check">
         </tab-content>
        <tab-content title="Bye" icon="fa fa-upload"></tab-content>

The generated steps in order:

• Hello
• Bye
• Step1
• Step2

Did I miss something?

[cristijora]

Hi @gazben I would recommend either using v-for for all the steps or for none
This is an older issue for which I don't have a good solution yet.

[gazben]

@cristijora Somehow this works:

        <template v-for="(item, index) in pages">
          <tab-content v-if="index === 0"  title="Hello" icon="fa fa-key"></tab-content>
          <tab-content v-else-if="index === pages.length - 1" title="Bye" icon="fa fa-upload"></tab-content>
          <tab-content :title="item.title" icon="fa fa-check"></tab-content>
        </template>

The generated steps in order:

• Hello
• Step 1
• Step 2
• Bye

Should I use it this way?

[cristijora]

Yes. That's pretty much what I suggested. Keeping everything inside v-for. Just for simplicity, I would put everything inisde your pages array so you end up with this only

<tab-content
            v-for="(item, index) in pages"
            v-bind:item="item"
            v-bind:index="index"
            v-bind:key="item.id"
            :title="item.title"
            :icon="item.icon">
         </tab-content>

Found an example.
https://jsfiddle.net/bt5dhqtf/973/

You can easily use component :is="componentName" and define each step in separate components if you have a more complicated wizard. Then simply define a component for each step

[cristijora]

Maybe I should update docs with this example since I would recommend the following approach from the last fiddle as it can cover many cases and it's pretty clean.