how to realize header-method steps in vuetify?

29 views Asked by At

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>

how it looks like

I checked all the issues and any stackoverflow pages, but no code works in my project.

0

There are 0 answers