How to detect completion of q-stepper?

krsyoung

I see in previous versions of Quasar there used the be a @finish event (see http://v0-13.quasar-framework.org/components/stepper.html).

This is no longer available. Curious if others have an approach to dealing with routing (or anything) once the user clicks “Done” on the last step?

My current approach is as follows:

      <q-stepper-navigation>
        <q-btn
          flat
          @click="$refs.stepper.previous()"
          label="Back"
        />
        <q-btn
          v-if="currentStep !== 'done'"
          @click="$refs.stepper.next()"
          label="Next"
        />
        <q-btn
          v-if="currentStep === 'done'"
          @click="finish()"
          label="Done"
        />
      </q-stepper-navigation>

Shone

@krsyoung You could track step name name="first" name="second" name="finish" or you could use v-model.
Make sure to read the docs.
https://quasar-framework.org/components/stepper.html

Shone

rstoenescu

So user should click on “Done” button, right? It calls “finish()” method… so there you go. When “finish()” gets called the Stepper has finished its job.
Won’t get into details, because there’s quite a lot to explain here and time is limited, but since you now have buttons to control the flow of QStepper you’re able to determine that yourself. Just trying to make QStepper cover as much use cases as possible.

krsyoung

Ok thanks guys, sounds like my current approach is the “best” approach.

Here is the full reference for others who might be in the same boat:

<template>
  <q-page padding>
    <!-- content -->
    <q-stepper ref="stepper" v-model="currentStep">
      <q-step default title="Welcome" name="welcome">
        <h5 class="q-mt-xs q-mb-md">Welcome</h5>
      </q-step>

      <q-step title="Pizza" name="pizza">
        <pizza ref="pizza"></pizza>
      </q-step>

      <q-step title="Wings" name="wings">
        <wings ref="wings"></wings>
      </q-step>

      <q-step title="Done" name="done">
        <p>Enjoy!</p>
      </q-step>

      <!-- custom nav to deal with done -->
      <q-stepper-navigation>
        <q-btn
          flat
          @click="$refs.stepper.previous()"
          label="Back"
        />
        <q-btn
          v-if="currentStep !== 'done'"
          @click="$refs.stepper.next()"
          label="Next"
        />
        <q-btn
          v-if="currentStep === 'done'"
          @click="finish()"
          label="Done"
        />
      </q-stepper-navigation>
      <q-inner-loading :visible="inProgress" />
    </q-stepper>
  </q-page>
</template>

<script>
import Pizza from '../components/Pizza'
import Wings from '../components/Wings'

export default {
  name: 'Order',
  data () {
    return {
      currentStep: 'welcome',
      inProgress: false
    }
  },
  components: {
    Pizza,
    Wings
  },
  watch: {
    currentStep (to, from) {
      this.transition(from, to)
    }
  },
  methods: {
    transition (from, to) {
      if (from === 'pizza') {
        console.log('ajax to save the pizza toppings')
        this.inProgress = true
        this.$store.dispatch('pizza/update', pizza)
          .then(response => {
            this.inProgress = false
            this.currentStep = to
          })
      } else {
        this.currentStep = to
      }
    },
    finish () {
      console.log('ajax to submit the order')
      this.$store.dispatch('order/create', pizza)
        .then(response => {
          this.$router.push('/')
        })    
    }
  }
}
</script>

No More Posting New Topics!

How to detect completion of q-stepper?