beforeTabSwitch is not being called
campgurus opened this issue · 1 comments
campgurus commented
I have a simple three question onboarding form, I am trying to use the wizard for.
beforeTabSwitch does not appear to be called when I switch between the form elements. Here is my component:
<template>
<div>
...
<form-wizard @on-complete="onComplete">
<tab-content title="Location">
<p>looks like you're at {{address}}, correct?</p>
<b-form role="form" @submit.prevent="handleSubmit(login)">
<base-input alternative
class="mb-3"
name=""
:rules="{required: true}"
prepend-icon="ni ni-pin-3"
v-model="address">
</base-input>
</b-form>
</tab-content>
<tab-content title="Genre">
<p>Do you this or that?</p>
<b-form-group label="">
<b-form-radio v-model="selected" name="some-radios" value="this">this</b-form-radio>
<b-form-radio v-model="selected" name="some-radios" value="that">that</b-form-radio>
</b-form-group>
<div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
</tab-content>
<tab-content title="Level">
<p>How serious are you ?</p>
<b-form-group >
<b-form-radio v-model="selected" name="some-radios" value="Pro">Professional</b-form-radio>
<b-form-radio v-model="selected" name="some-radios" value="Hobbyist">Hobbyist</b-form-radio>
<b-form-radio v-model="selected" name="some-radios" value="Both">Some of both</b-form-radio>
</b-form-group>
<div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
</tab-content>
</form-wizard>
</div>
</template>
<script>
import axios from 'axios'
// import Location from '@/views/Components/OnboardingWizard/Location'
// import Genre from '@/views/Components/OnboardingWizard/Genre'
// import Level from '@/views/Components/OnboardingWizard/Level'
export default {
name: 'OnboardingFlow',
components: {
// Location,
// Genre,
// Level
},
data () {
return {
genre: '',
level: '',
address: this.$store.state.auth.userAddress,
selected: null,
notification: {
message: '',
type: ''
},
submitted: false,
}
},
computed: {
},
methods: {
onComplete: function(){
alert(this.$store.state.auth.userPrefs.genre);
},
beforeTabSwitch: function(){
alert("This is called before switching tabs")
return true;
}
}
}
</script>
campgurus commented
nevermind, I see what I was missing.