How to validate last step with custom buttons?

[jonalxh]

HI, I have a custom buttons which handle the prevTab() and nextTab() methods, but I'm not able to validate the last step, I've tried with default buttons and it works. Is there a method to validate the last step with the wizard ref?

[BRafols]

Hello,

You could use the finish slot to add you button and hook onto it's click event.

[AngelNav]

this could work for you, you need to use a wizard property named isLastStep

 <template slot="footer" slot-scope="props">
                                <div class=wizard-footer-left>
                                    <wizard-button v-if="props.activeTabIndex > 0" :style="props.fillButtonStyle"
                                                   @click.native="props.prevTab()">Anterior
                                    </wizard-button>
                                </div>
                                <div class="wizard-footer-right">
                                    <wizard-button v-if="!props.isLastStep" @click.native="props.nextTab()"
                                                   class="wizard-footer-right" :style="props.fillButtonStyle">Siguiente
                                    </wizard-button>

                                    <wizard-button v-else class="wizard-footer-right finish-button"
                                                   :type="props.isLastStep ? 'submit': 'button'"
                                                   :style="props.fillButtonStyle">
                                        {{ props.isLastStep ? 'Finalizar' : 'Siguiente' }}
                                    </wizard-button>
                                </div>
                            </template>

and then you add this method

 isLastStep() {
            if (this.$refs.wizard)
                return this.$refs.wizard.isLastStep
            return false
        },