BinarCode/vue-form-wizard

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>
hlgkb commented

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.