Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(VStepperVertical): provide defaults props eager for VStepperVerticalItem #20033

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

SonTT19
Copy link
Contributor

@SonTT19 SonTT19 commented Jun 20, 2024

Description

fixes #20025

Markup:

<template>
  <v-stepper-vertical eager>
    <template v-slot:default="{ step }">
      <v-stepper-vertical-item
        :complete="step > 1"
        subtitle="Personal details"
        title="Step one"
        value="1"
      >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
        ratione debitis quis est labore voluptatibus! Eaque cupiditate minima,
        at placeat totam, magni doloremque veniam neque porro libero rerum unde
        voluptatem!

        <template v-slot:next="{ next }">
          <v-btn color="primary" @click="next"></v-btn>
        </template>

        <template v-slot:prev></template>
      </v-stepper-vertical-item>

      <v-stepper-vertical-item
        :complete="step > 2"
        subtitle="Contact Details"
        title="Step two"
        value="2"
      >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
        ratione debitis quis est labore voluptatibus! Eaque cupiditate minima,
        at placeat totam, magni doloremque veniam neque porro libero rerum unde
        voluptatem!

        <template v-slot:next="{ next }">
          <v-btn color="primary" @click="next"></v-btn>
        </template>

        <template v-slot:prev="{ prev }">
          <v-btn variant="plain" @click="prev"></v-btn>
        </template>
      </v-stepper-vertical-item>

      <v-stepper-vertical-item
        subtitle="Confirmation"
        title="Step three"
        value="3"
        @click:next="onClickFinish"
      >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
        ratione debitis quis est labore voluptatibus! Eaque cupiditate minima,
        at placeat totam, magni doloremque veniam neque porro libero rerum unde
        voluptatem!

        <template v-slot:next="{ next }">
          <v-btn color="primary" text="Finish" @click="next"></v-btn>
        </template>

        <template v-slot:prev="{ prev }">
          <v-btn v-if="!finished" variant="plain" @click="prev"></v-btn>

          <v-btn
            v-else
            text="Reset"
            variant="plain"
            @click="finished = false"
          ></v-btn>
        </template>
      </v-stepper-vertical-item>
    </template>
  </v-stepper-vertical>
</template>

<script>
  export default {
    data: () => ({
      finished: false,
    }),

    methods: {
      onClickFinish() {
        this.finished = true

        alert('Finished')
      },
    },
  }
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report][3.6.9] v-stepper-vertical: Data Loss on Step Change
1 participant