I'm in the process of setting up a login flow using Vuetify. The idea is that in the first step, users enter their email address, in the second step they provide their password, and in the third step, they input TOTP information for a 2nd-factor authentication check.
After each step, I want to execute a custom function that sends a request to the server and only proceeds to the next step if a valid response is received.
(Step 1: verifying email existence, Step 2: confirming correct password, Step 3: validating the TOTP token)
However, I'm facing an issue where my custom functions are not being attached to the stepper action buttons.
Below is a stripped-down version of my code:
<template>
<v-container>
<v-card>
<v-stepper
v-model="step"
:items="items"
@click:prev="prev"
@click:next="next"
>
<template v-slot:item.1>
</template>
<template v-slot:item.2>
</template>
<template v-slot:item.3>
</template>
</v-stepper>
</v-card>
</v-container>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const step = ref(0);
const items = [
{ title: 'E-Mail' },
{ title: 'Password' },
{ title: '2nd-Factor' },
];
const prev = () => {
console.log('clicked prev')
# move to previous step
}
const next = () => {
console.log('clicked next')
# make background call
if(# error) {
# handle error
}
# proceed to next step on success
}
</script>
<style scoped lang="sass">
</style>
Even though I have defined the prev and next functions, they do not work when clicking the buttons within the stepper action menu.
It's worth noting that I opted for TypeScript over plain JavaScript in this implementation.