Call steps asynchronously

[pimboden]

Hello.
I'm trying to load my step-templates only when they are clicked.
Some of my steps have to load some data through ajax after loaded.

Right now, every steps is getting the data in the "created" life cycle of vue.

But I would like them to get the data only when the step becomes active. I there a way to do that. I haven't found anything in the documentation

Thanks for this fantastic component!

[cristijora]

Hi @pimboden
There is no "out-of-the-box" solution for this but from what you described I think there are a couple of ways to achieve this. I will make a fiddle example. There is an on-change event which you could use. I will try to make a fiddle

[cristijora]

Thinking a bit more about this, I think adding scoped slots for tab content is the best approach.
You will be able to do something like this

 <tab-content>
     <template scope="props">
          <step1 v-if="props.active"></step1>
     </template>
</tab-content>

Which will trigger step1 to re-render each time step1 is activated which will always trigger the created/mounted hooks inside step1

Here is a fiddle more close to your example I think
https://jsfiddle.net/CristiJ/bt5dhqtf/1043/

If the approach is ok with you, I will publish to npm a new version

[cristijora]

Released 0.6.6

[pimboden]

Thank you.
Your fiddle helped me resolve the issue!