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>