I understand, that i able to use items property, but i wanna use v-stepper-header with v-stepper-window. I try to start code from official examples and take the white screen as a result. How to fix this code, to take normal step-system?
<template>
<v-container>
<v-stepper v-model="e1">
<template #default="{ prev, next }">
<v-stepper-header>
<v-stepper-item
title="Job Search"
:complete="e1 > 1"
:value="1"
></v-stepper-item>
<v-divider></v-divider>
<v-stepper-item
title="Job Search"
:complete="e1 > 2"
:value="2"
></v-stepper-item>
<v-divider></v-divider>
<v-stepper-item
title="Job Search"
:complete="e1 > 3"
:value="3"
></v-stepper-item>
</v-stepper-header>
<v-stepper-window>
<v-stepper-window-item :value="1">
<v-text-field
v-model="user.firstName"
label="First Name"
></v-text-field>
<v-text-field
v-model="user.lastName"
label="Last Name"
></v-text-field>
<v-text-field v-model="user.email" label="Email"></v-text-field>
</v-stepper-window-item>
<v-stepper-window-item :value="2">
<v-text-field
v-model="user.occupation"
label="Occupation"
></v-text-field>
<v-text-field v-model="user.city" label="City"></v-text-field>
<v-textarea v-model="user.bio" label="Bio"></v-textarea>
</v-stepper-window-item>
<v-stepper-window-item :value="3">
<div>First Name: {{ user.firstName }}</div>
<div>Last Name: {{ user.lastName }}</div>
<div>Email: {{ user.email }}</div>
<div>Occupation: {{ user.occupation }}</div>
<div>City: {{ user.city }}</div>
<div>Bio: {{ user.bio }}</div>
</v-stepper-window-item>
</v-stepper-window>
<v-stepper-actions
@click:next="next"
@click:prev="prev"
></v-stepper-actions>
</template>
</v-stepper>
</v-container>
</template>
<script>
export default {
data() {
return {
e1: 1,
items: [
'User information',
'Personal details',
'Confirmation',
'Greetings',
],
user: {
firstName: '',
lastName: '',
email: '',
occupation: '',
city: '',
bio: '',
},
}
},
methods: {
submitForm() {
// Обработка отправки формы
console.log('Submitted', this.user)
this.e1 = 1 // Reset the form or move to a 'thank you' step
},
},
}
</script>
<style>
.v-sheet {
width: 650px;
margin: auto;
}
</style>
I checked all the issues and any stackoverflow pages, but no code works in my project.