Quasar Stepper: go back to step by clicking on the stepper title
-
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 thecurrentStep
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.
-
Did you try using the
header-nav
prop?Scott
-
that works!