#17 Fix repeated tab-change events

Author: cristian.jora

dev/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <vue-tabs class="card" @on-error="handleError"
+    <vue-tabs class="card"
+              @tab-change="handleTabChange"
+              @on-error="handleError"
               v-model="tabName">
       <v-tab v-for="(tab, index) in tabList"
              :key="tab.name"
@@ -28,6 +30,9 @@
       handleError(error){
         this.error = error
       },
+      handleTabChange(tabIndex, newTab, oldTab){
+          console.log(tabIndex, newTab.title, oldTab.title)
+      },
       goToSecondTab(){
           this.tabName='name2'
       }

src/components/VueTabs.js

@@ -100,7 +100,8 @@ export default{
         },
         findTabAndActivate (tabNameOrIndex) {
             let indexToActivate = this.tabs.findIndex((tab, index) => tab.title === tabNameOrIndex || index === tabNameOrIndex)
-            if (indexToActivate != -1) {
+            if (indexToActivate === this.activeTabIndex) return
+            if (indexToActivate !== -1) {
                 this.changeTab(this.activeTabIndex, indexToActivate)
             } else {
                 this.changeTab(this.activeTabIndex, 0)
@@ -139,7 +140,6 @@ export default{
                         this.renderTabTitle(index, this.textPosition)
                         }
                         <a href="javascript:void(0)"
-                           onClick={() => this.navigateToTab(index)}
                            style={active ? this.activeTabStyle : {}}
                            class={{'active_tab': active}}
                            aria-selected={active}