When using button slots the next and previous skips a step
jvgrootveld opened this issue · 2 comments
What I want
I want to use my own button component for the previous, next and submit button. To implement this in Vue Form Wizard I use the slots prev
, next
and submit
.
What happens
When using these slots the prevTab
and nextTab
skips a step and move with 2 steps at a time. When logging the form-wizard on-change
event I see the event is called two times.
Example: https://jsfiddle.net/jvgrootveld/gbtjzvcf/9/
<button
slot="prev"
slot-scope="props"
v-if="props.activeTabIndex > 0"
@click="props.prevTab()"
>Previous</button>
<button
slot="next"
slot-scope="props"
v-if="!props.isLastStep"
@click="props.nextTab()"
>Next</button>
<button
slot="finish"
slot-scope="props"
v-if="props.isLastStep"
@click="props.onSubmit()"
>Submit</button>
What I expect
I expect the navigation to go with one step at a time.
Temporary workaround
I found a (temporary) workaround using the footer
slot.
Example: https://jsfiddle.net/jvgrootveld/gjeLqsm5/2/
<template slot="footer" slot-scope="props">
<button
slot="prev"
slot-scope="props"
v-if="props.activeTabIndex > 0"
@click="props.prevTab()"
>Previous</button>
<button
slot="next"
slot-scope="props"
v-if="!props.isLastStep"
@click="props.nextTab()"
>Next</button>
<button
slot="finish"
slot-scope="props"
v-if="props.isLastStep"
@click="props.onSubmit()"
>Submit</button>
</template>
That's because you don't need to worry about the about handling the button functionality while using the button slots. That slot is only used for the content of the button. If you remove the click event it will work as expected.
<button
slot="prev"
slot-scope="props"
v-if="props.activeTabIndex > 0"
>Previous</button>
<button
slot="next"
slot-scope="props"
v-if="!props.isLastStep"
>Next</button>
<button
slot="finish"
slot-scope="props"
v-if="props.isLastStep"
>Submit</button>
@hlgkb Ah! Not really wat I was expecting. I hope when this library is further developed, the documentation is getting an overhaul too.