How to validate last step with custom buttons?
jonalxh opened this issue · 2 comments
jonalxh commented
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 commented
Hello,
You could use the finish
slot to add you button and hook onto it's click event.
AngelNav commented
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
},