BinarCode/vue-form-wizard

beforeTabSwitch is not being called

campgurus opened this issue · 1 comments

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>

nevermind, I see what I was missing.