BinarCode / vue-form-wizard

Vue.js 2 wizard
https://binarcode.github.io/vue-form-wizard/#/
MIT License
1.11k stars 244 forks source link

When using button slots the next and previous skips a step #350

Closed jvgrootveld closed 4 years ago

jvgrootveld commented 4 years ago

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 4 years ago

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>
jvgrootveld commented 4 years ago

@hlgkb Ah! Not really wat I was expecting. I hope when this library is further developed, the documentation is getting an overhaul too.