0

I'm using a v-stepper from Vuetify.

What I want is:

  • when the user click on a stepper step (in the header) I block the click event if the active form isn't valid

I'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!

Cyril F
  • 1,842
  • 2
  • 19
  • 35
  • I tried your demo and it looks like your `editable` prop is just wrong. making it return false will not allow step to be changed. – captainskippah Feb 02 '22 at 09:46
  • I don't want it to return false all the time. Only when the active form is invalid (which works nicely once the $form.validate() return false) But clicking on the header change the bad before call my $form.validate() – Cyril F Feb 02 '22 at 09:52
  • hey, @CyrilF why you are calling two different methods for the header and continue button? is it not possible to call same method in header too like. – Nilesh Mishra Feb 02 '22 at 11:50
  • @NileshMishra yes I could use the same method. But my goal is to cancel the click. The `headerClick` function gets an $event as a param so I can cancel the click with `event.stopPropagation();` – Cyril F Feb 02 '22 at 17:10
  • @CyrilF here is the link which I want to convey to you. https://codepen.io/nilesh9836/pen/GROqJaq?editors=1010 – Nilesh Mishra Feb 02 '22 at 18:37
  • I see. But that's doesn't solve my issue. My problem is that when you click on the number "2", it goes to the next step without validating. But when you click on the text "All my requests" it works fine. – Cyril F Feb 02 '22 at 22:06

1 Answers1

0

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>
UmbrellaCorpAgent
  • 548
  • 1
  • 5
  • 17
  • Thanks for answering. This isn't what I'm looking for. I want the `@click="headerClick"` to be on the `v-stepper-step` AND if the form isn't valid I cancel the click. But the cancelling doesn't work. It seems like the js click event is bubbling up so I'm too late in the call chain. – Cyril F Feb 02 '22 at 17:16