BinarCode/vue-form-wizard

Lazy loading issue

abliGhtS opened this issue ยท 6 comments

I have two differents routes in my wizard. Route A and B. They're separated by if condition. All of the steps are lazy-loaded (or at least I want them to be), because I don't want to load all components of path A is someoone chooses path B.

My vue-wizard looks like this

 <form-wizard >
    <tab-content>
        <step1 />
    </tab-content>
    <tab-content :lazy="true"
                 v-if="versionA"
    >
        <step2A/>
    </tab-content>
    <tab-content :lazy="true" 
                 v-else>
        <step2B />
    </tab-content>
    <tab-content :lazy="true"
                 v-if="versionA">
        <step3A/>
    </tab-content>
    <tab-content :lazy="true"
                 v-else>
        <step3B/>
    </tab-content>

</form-wizard>

But when I print logs in mounted() of each of the components, I can see that whole route B is loaded at once. Same issue with lazy-loading appears even in simplest example. Unless I'm using it incorrectly?

Yes, components get mounted but the rendered HTML should be empty.

hex20 commented

This is a real pain because It will be mounted but without the HTML things like this.$ref will throw undefined errors

You can always choose to not use "lazy-loading", would that fit your case?

I have relied on this and realized that the package I just downloaded does not have this feature #316 in its source code.

@mreduar thanks a lot for pointing that out.. I was wondering why the lazy flag seemed to make no difference

The last release is more than 3 years old.. 31 commits since the last release

But you can get all the latest commits by installing it like this in your package.json:


"vue-form-wizard": "git://github.com/binarcode/vue-form-wizard.git#4ba261a",

AHHHHHH ! This explain so many things !!!!!

@fabdbt @BRafols @cristijora Can you please make a new release on master ?

Thanks