Quasar Stepper: go back to step by clicking on the stepper title

[jwdobken]

Along with the navigation using the Continue and Back buttons, I like to be able to go back and forth by selecting the headers of the steps.

So, naively I included a click event that would set the currentStep to the specific step:

  <q-stepper v-model="currentStep">
    <q-step name="first"
             title="First step"
             @click="currentStep = 'first'">
      ...
      <q-stepper-navigation>
        <q-btn
          color="primary"
          @click="currentStep = 'second'"
          label="Go to Step 2"
        />
      </q-stepper-navigation>
    </q-step>

    <q-step name="second"
             title="Second step"
             @click="currentStep = 'second'">
      ...
      <q-stepper-navigation>
        <q-btn
          color="primary"
          @click="currentStep = 'first'"
          label="Go Back"
        />
      </q-stepper-navigation>
    </q-step>
  </q-stepper>

But when clicking on the Continue button, the step itself will be clicked too setting the currentStep back to it’s previous value. So the user will stay on this step.

[s.molinari]

Did you try using the header-nav prop?

Scott

[jwdobken]

that works!