From e8c22fbfa37afc0cc7466309f8a2d059d7ddd6c3 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 10 Aug 2019 14:48:05 -0400
Subject: [PATCH] refactor TabSwitcher

---
 src/components/tab_switcher/tab_switcher.js | 22 +++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index f11d96e6..08d5d08f 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -10,6 +10,16 @@ export default Vue.component('tab-switcher', {
       active: this.$slots.default.findIndex(_ => _.tag)
     }
   },
+  computed: {
+    activeIndex () {
+      // In case of controlled component
+      if (this.activeTab) {
+        return this.$slots.default.findIndex(slot => this.activeTab === slot.key)
+      } else {
+        return this.active
+      }
+    }
+  },
   beforeUpdate () {
     const currentSlot = this.$slots.default[this.active]
     if (!currentSlot.tag) {
@@ -24,14 +34,6 @@ export default Vue.component('tab-switcher', {
         }
         this.active = index
       }
-    },
-    isActiveTab (index) {
-      // In case of controlled component
-      if (this.activeTab) {
-        return this.$slots.default.findIndex(slot => this.activeTab === slot.key) === index
-      } else {
-        return this.active === index
-      }
     }
   },
   render (h) {
@@ -41,7 +43,7 @@ export default Vue.component('tab-switcher', {
         const classesTab = ['tab']
         const classesWrapper = ['tab-wrapper']
 
-        if (this.isActiveTab(index)) {
+        if (this.activeIndex === index) {
           classesTab.push('active')
           classesWrapper.push('active')
         }
@@ -71,7 +73,7 @@ export default Vue.component('tab-switcher', {
 
     const contents = this.$slots.default.map((slot, index) => {
       if (!slot.tag) return
-      const active = this.isActiveTab(index)
+      const active = this.activeIndex === index
       if (this.renderOnlyFocused) {
         return active
           ? <div class="active">{slot}</div>