Fix #28 Error to activate tab in destroyed hook

Author: cristijora

dev-example/App.vue

@@ -1,79 +1,12 @@
 <template>
   <div>
-    <button @click="tabs.shift()">Remove one at start</button>
-    <button @click="tabs.push('testt')">Add at the end</button>
-    <button @click="tabs.unshift('new start')">Add one at start</button>
-    <form-wizard @on-complete="onComplete"
-                 :hide-buttons="false"
-                 shape="square"
-                 color="gray"
-                 @on-loading="setLoading"
-                 @on-error="setError"
-                 class="card" ref="wizard">
-      <template slot="step" scope="props">
-        <wizard-step :tab="props.tab"
-                     transition="fade"
-                     :key="props.tab.title"
-                     :index="props.index">
-        </wizard-step>
-      </template>
 
-       <tab-content title="Personal details" icon="ti-user">
-         My first tab
-       </tab-content>
-        <tab-content v-for="tab in tabs" :title="tab" :key="tab" icon="ti-settings">
-          {{tab}}
-        </tab-content>
-        <div class="loader" v-if="loadingWizard"></div>
-        <div v-if="error">
-          {{error}}
-        </div>
-    </form-wizard>
+     <router-view></router-view>
   </div>
 </template>
 
 <script>
-  import TabContent from "../src/components/TabContent";
-
-  export default {
-    components: {TabContent},
-    name: 'app',
-    data () {
-      return {
-        loadingWizard: false,
-        error: null,
-        count: 0,
-        tabs: ['test', 'test2', 'test3']
-      }
-    },
-    methods: {
-      onComplete () {
-        alert('Yay!')
-      },
-      setLoading (value) {
-        this.loadingWizard = value
-      },
-      setError (error) {
-        this.error = error
-      },
-      validateAsync () {
-        //simulating an error for the first time and a success for the second time
-        return new Promise((resolve, reject) => {
-          setTimeout(() => {
-            if (this.count % 2 === 0) {
-              reject('Some custom error')
-            } else {
-              resolve(true)
-            }
-            this.count++
-          }, 100)
-        })
-      },
-      validate () {
-        return true
-      }
-    }
-  }
+  export default {}
 </script>
 <style>
   @import "loader.css";

dev-example/TestRoute.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+        Test route
+      <router-link to="/">Go to wizard</router-link>
+    </div>
+</template>
+<script>
+    export default {}
+</script>
+<style>
+</style>

dev-example/WizardRoute.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <button @click="tabs.shift()">Remove one at start</button>
+    <button @click="tabs.push('testt')">Add at the end</button>
+    <button @click="tabs.unshift('new start')">Add one at start</button>
+    <router-link to="/test">Go to a different route</router-link>
+    <form-wizard @on-complete="onComplete"
+                 shape="circle"
+                 color="#e74c3c">
+      <tab-content title="Personal details"
+                   route="/first"
+                   icon="ti-user">
+      </tab-content>
+      <tab-content title="Additional Info"
+                   route="/second"
+                   icon="ti-settings">
+      </tab-content>
+      <tab-content title="Last step"
+                   route="/third"
+                   icon="ti-check">
+      </tab-content>
+      <transition name="fade" mode="out-in">
+        <router-view></router-view>
+      </transition>
+
+    </form-wizard>
+  </div>
+</template>
+
+<script>
+  import TabContent from "../src/components/TabContent";
+  export default {
+    components: {TabContent},
+    data () {
+      return {
+        loadingWizard: false,
+        error: null,
+        count: 0,
+        tabs: ['test', 'test2', 'test3']
+      }
+    },
+    methods: {
+      onComplete () {
+        alert('Yay!')
+      },
+      setLoading (value) {
+        this.loadingWizard = value
+      },
+      setError (error) {
+        this.error = error
+      },
+      validateAsync () {
+        //simulating an error for the first time and a success for the second time
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            if (this.count % 2 === 0) {
+              reject('Some custom error')
+            } else {
+              resolve(true)
+            }
+            this.count++
+          }, 100)
+        })
+      },
+      validate () {
+        return true
+      }
+    }
+  }
+</script>
+<style>
+  @import "loader.css";
+</style>
+<style lang="scss">
+  $border-radius-extreme: 6px !default;
+  $white-color: white;
+  $gray-input-bg: #F3F2EE !default;
+  $card-black-color: #252422 !default;
+
+  body {
+    margin-top: 20px;
+    background-color: #ecf0f1;
+  }
+
+  .card-footer {
+    padding: 0px 20px;
+  }
+
+  .card {
+    border-radius: $border-radius-extreme;
+    box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
+    background-color: $white-color;
+    color: $card-black-color;
+    padding: 10px 0;
+    margin-bottom: 20px;
+    position: relative;
+    z-index: 1;
+  }
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .2s
+  }
+  .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+    opacity: 0
+  }
+</style>

dev-example/main.js

@@ -4,16 +4,26 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import App from './App.vue'
 import FormWizard from '../src/index'
-const First = { template: '<div>First page</div>' }
-const Second = { template: '<div>Second page</div>' }
-const Third = { template: '<div>Third page</div>' }
+import WizardRoute from './WizardRoute.vue'
+import TestRoute from './TestRoute.vue'
+
+const First = {template: '<div>First page</div>'}
+const Second = {template: '<div>Second page</div>'}
+const Third = {template: '<div>Third page</div>'}
 
 const router = new VueRouter({
   mode: 'history',
   routes: [
-    { path: '/first', component: First },
-    { path: '/second', component: Second },
-    { path: '/third', component: Third }
+    {
+      path: '/', component: WizardRoute,
+      children: [
+        {path: '/first', component: First},
+        {path: '/second', component: Second},
+        {path: '/third', component: Third}
+      ]
+    },
+    {path: '/test', component: TestRoute},
+
   ]
 })
 Vue.use(VueRouter)
@@ -25,6 +35,5 @@ Vue.config.productionTip = false
 new Vue({
   router,
   el: '#app',
-  template: '<App/>',
-  components: {App}
+  render: h => h(App)
 })

src/components/FormWizard.vue

@@ -362,9 +362,11 @@
       activateTab (index) {
         this.deactivateTabs()
         let tab = this.tabs[index]
-        tab.active = true
-        tab.checked = true
-        this.tryChangeRoute(tab)
+        if (tab) {
+          tab.active = true
+          tab.checked = true
+          this.tryChangeRoute(tab)
+        }
       },
       activateTabAndCheckStep (index) {
         this.activateTab(index)