Skip to content
New issue

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

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

Already on GitHub? # 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
# for free to join this conversation on GitHub. Already have an account? # 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