[Vuejs]-How to get redirected to a particular step in a wizard in vue and typescript

by

0👍

✅

Router-links are specifically meant to change your app’s current page, which is why you see your stepFour component completely replace everything. Review Quasar’s QStepper API documentation. There is no need to use router-links to control navigation of the component. It’s built into the component with v-model, where changing the v-model value will change which step the component displays. A very basic example:

<q-stepper
  v-model="step"
>
  <q-step :name="1" />
  <q-step :name="2" />
  <q-step :name="3" />
</q-stepper>

Now in a function if you set step to a value 1, 2 or 3, q-stepper will set the current displayed step to that same named q-step child component.

0👍

Instead of writing the in the step6.ts. Change the wizard.ts as follows.

  <WizardStep :number-of-steps="numberOfSteps" :name="6" :done="step > 6" v-if="!isHelp">
    <StepSix ref="step6" />
    <div >
    <q-btn
        :ripple="false"
        flat
        color="primary"
        class="q-mb-sm full-width"
        @click="redirect()"
      >
        {{ $t('pages.projects.project.deviceConnection.validation.symbolDidntBlink') }}
      </q-btn>
    </div>
  </WizardStep>

This redirects the user to step4 inside the wizard.

Leave a comment