I'm using a v-stepper from Vuetify.
What I want is:
click event if the active form isn't validI've managed to do so but by setting the click listener on the span element:
<v-stepper-step :key="step.id" :step="step.id" :rules="[() => !!step.valid]" :editable="currentStepId !== step.id && currentStep.valid">
<span @click="headerClick" v-html="step.name"></span>
</v-stepper-step>
This works well, the click is cancelled and that's exactly what I want. Here is a live demo you can interact with.
My issue is:
It only works on the label, not the full clickable area.
I would like the entire stepper-step button to call this method.
But if I attach the @click listener on the v-stepper-step then it's too late, I can't cancel the click event (by doing e.stopPropagation).
Is there a way for me to do so? demo code
Thanks!
It's a little bit unclear what you want to do exactly, but taking @click to the whole makes it so the headerCLick function behave exatly how it does when the click is on the label, yet you can click anywhere on the header (which I take for granted is what you mean by "the full clickable area").
<v-stepper-header @click="headerClick">
<template v-for="step in steps">
<v-stepper-step :key="step.id" :step="step.id" :rules="[() => !!step.valid]" edit-icon="$complete" :complete="currentStepId > step.id" :editable="currentStepId !== step.id && currentStep.valid">
<span class="v-stepper-step-clickable" v-html="step.name"></span>
</v-stepper-step>
<v-divider :key="`divider-${step.id}`" v-if="step.id < lastStep"></v-divider>
</template>
</v-stepper-header>