feat(tabs): Use MutationObserver for reactive slot updates (#92)

matsp · Apr 23, 2018 · 26b33c3 · 26b33c3
1 parent df3c08c
commit 26b33c3
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/components/tabs/Tab.vue b/components/tabs/Tab.vue
@@ -34,7 +34,8 @@ export default {
   },
   data () {
     return {
-      mdcTab: null
+      mdcTab: undefined,
+      slotObserver: undefined
     }
   },
   computed: {
@@ -46,16 +47,27 @@ export default {
     }
   },
   mounted () {
-    if (this.$slots.icon) {
-      this.$slots.icon[0].elm.classList.add('mdc-tab__icon')
-      this.label ? this.$slots.icon[0].elm.setAttribute('aria-label', true)
-        : this.$slots.icon[0].elm.setAttribute('aria-hidden', true)
-    }
+    this.updateSlot()
+    this.slotObserver = new MutationObserver( () => this.updateSlot())
+    this.slotObserver.observe(this.$el, {
+      childList: true,
+      subtree: true
+    })
 
     this.mdcTab = MDCTab.attachTo(this.$el)
   },
   beforeDestroy () {
+    this.slotObserver.disconnect()
     this.mdcTab.destroy()
+  },
+  methods: {
+    updateSlot () {
+      if (this.$slots.icon) {
+        this.$slots.icon[0].elm.classList.add('mdc-tab__icon')
+        this.label ? this.$slots.icon[0].elm.setAttribute('aria-label', true)
+          : this.$slots.icon[0].elm.setAttribute('aria-hidden', true)
+      }
+    }
   }
 }
 </script>
diff --git a/components/tabs/TabBar.vue b/components/tabs/TabBar.vue
@@ -59,8 +59,8 @@ export default {
   },
   data () {
     return {
-      mdcTabBar: null,
-      mdcTabBarScroller: null
+      mdcTabBar: undefined,
+      mdcTabBarScroller: undefined
     }
   },
   computed: {
@@ -78,9 +78,12 @@ export default {
       : (this.mdcTabBar = MDCTabBar.attachTo(this.$el))
   },
   beforeDestroy () {
-    this.scrollable
-      ? this.mdcTabBarScroller.destroy()
-      : this.mdcTabBar.destroy()
+    if (typeof this.mdcTabBarScroller !== 'undefined') {
+      this.mdcTabBarScroller.destroy()
+    }
+    if (typeof this.mdcTabBar !== 'undefined') {
+      this.mdcTabBar.destroy()
+    }
   }
 }
 </script>