I am currently working on a personal project to add to my portfolio. The project involves creating a registration site where users can input their personal data, shipping information, and then review everything before submission.
To streamline the process, I have implemented a view called Register.vue that includes a Vuetify stepper with three steps: PersonalDataForm (a separate component), ShippingForm (another separate component), and a recap section.
One challenge I'm encountering is how to disable the "next" button on the stepper until the form is completed. Additionally, I am struggling with passing props to solve this issue.
In the REGISTER VIEW:
<template>
<v-stepper color="deep-purple-darken-1" :items="['Personal Data', 'Shipping Address', 'Recap']" class="my-5">
<template v-slot:item.1>
<v-card>
<PersonalDataForm @formDataSubmitted="handlePersonalDataForm" :isFormIncomplete="personalDataFormIsIncomplete"/>
</v-card>
</template>
<template v-slot:item.2>
<v-card>
<ShippingForm @formDataSubmitted="handleShippingForm" :isFormIncomplete="shippingFormIsIncomplete"/>
</v-card>
</template>
<template v-slot:item.3>
<v-card>
<Recap @completed="submitData" :disabled="isFormIncomplete"/>
</v-card>
</template>
</v-stepper>
</template>The PersonalDataForm.vue contains fields for first name, last name, birth date, birth place, and fiscal code. It utilizes Vuelidate for form validation.
The ShippingForm.vue includes fields for full name, region, province, city, house number, email, and phone number. Similar to the PersonalDataForm, it uses Vuelidate for validation.