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 eager in defaults props #20033

Merged

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>

@johnleider johnleider added T: bug Functionality that does not work as intended/expected C: VStepperVertical labels Jul 2, 2024
@johnleider johnleider merged commit 620a0d9 into master Jul 2, 2024
18 of 19 checks passed
@johnleider johnleider deleted the fix/20025-v-stepper-vertical-provide-default-props-eager branch July 2, 2024 20:53
@johnleider johnleider changed the title fix(VStepperVertical): provide defaults props eager for VStepperVerticalItem fix(VStepperVertical): provide eager in defaults props Jul 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VStepperVertical T: bug Functionality that does not work as intended/expected
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
2 participants