In this wizard, there are 6 steps. The last step includes a button that redirects the user back to step 4 when clicked. The user must then complete steps 5 and 6 in order to finish the wizard.
step6.ts
<router-link
to="/stepFour"
custom
v-slot="{ navigate }"
>
<q-btn
:ripple="false"
flat
:label="$t('pages.projects.project.deviceConnection.validation.symbolDidntBlink')"
@click="navigate"
role="link"
/>
</router-link>
router.ts
const routes = [
//connect: redirect
{
path: 'stepFour',
name: 'step4',
component: () => import('components/connection/4_stepFour/stepFour.vue'),
props: {
slaveLevel: 1,
},
},
];
wizard.vue
<template>
<q-stepper
v-bind:value="value"
v-on:input="handleInput"
ref="stepper"
color="primary"
flat
class="c-stepper"
@transition="transitionPanel"
>
<slot />
<template v-slot:navigation>
<q-card-actions class="c-wizarDialog__footer c-btn__action" align="center">
<q-btn
v-if="value > 1 && !disablePreviousButton"
:ripple="false"
:disable="disablePreviousButton"
icon="chevron_left"
flat
dense
size="lg"
text-color="primary"
@click="goPrevious($refs)"
data-cy="wizard-back"
class="c-btn--previous"
/>
<q-btn
:ripple="false"
v-if="value === numberOfSteps"
:disable="disableFinishButtonState"
@click="finish(actionButtonFunction)"
color="primary"
:label="$t('general.finish')"
class="c-btn--finish full-width"
data-cy="wizard-finish"
/>
<q-btn
v-else-if="pShowNextButton"
:ripple="false"
:disabled="disableNextButton"
@click="goToNextStep($refs)"
color="primary"
class="c-btn--continue full-width"
data-cy="wizard-continue"
>
{{ $t('general.continue') }}
</q-btn>
</q-card-actions>
</template>
</q-stepper>
</template>
connection.ts
<template>
<WizardDialog
:title="$t('components.appBar.connection')"
:actionButtonTitle="$t('general.createButtonText')"
v-on:dialogVisibility="handleDialogVisibility"
:cancelButtonLabel="''"
>
<Wizard
:number-of-steps="numberOfSteps"
v-model="step"
:action-button-function="finishFunction"
:disable-next-button="disableNextButton"
:has-step-errors="hasStepErrors"
>
<WizardStep
class="c-identifyDialog"
:number-of-steps="numberOfSteps"
:name="0"
:done="step > 0"
>
//wizard steps from 1 to 5
<WizardStep :number-of-steps="numberOfSteps" :name="6" :done="step > 6" v-if="!isHelp">
<StepSix />
</WizardStep>
</Wizard>
</WizardDialog>
</template>
This section of code implements a redirection to step 4 outside of the wizard interface. Assistance is needed to correct this behavior.