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

matsp · Apr 23, 2018 · 64c382d · 64c382d
1 parent 4dc7e4b
commit 64c382d
Showing 1 changed file with 23 additions and 11 deletions.
diff --git a/components/list/ListItem.vue b/components/list/ListItem.vue
@@ -46,7 +46,8 @@ export default {
   },
   data () {
     return {
-      mdcRipple: null
+      mdcRipple: null,
+      slotOberserver: null
     }
   },
   computed: {
@@ -58,21 +59,32 @@ export default {
     }
   },
   mounted () {
+    this.updateSlots()
+    this.slotOberserver = new MutationObserver( () => this.updateSlots())
+    this.slotOberserver.observe(this.$el, {
+      childList: true,
+      subtree: true
+    })
     if (this.interactive) { this.mdcRipple = MDCRipple.attachTo(this.$el) }
 
-    if (this.$slots.graphic) {
-      this.$slots.graphic.map(n => {
-        n.elm.classList.add('mdc-list-item__graphic')
-      })
-    }
-    if (this.$slots.meta) {
-      this.$slots.meta.map(n => {
-        n.elm.classList.add('mdc-list-item__meta')
-      })
-    }
   },
   beforeDestroy () {
+    this.slotOberserver.disconnect()
     if (this.interactive) { this.mdcRipple.destroy() }
+  },
+  methods:  {
+    updateSlots () {
+      if (this.$slots.graphic) {
+        this.$slots.graphic.map(n => {
+          n.elm.classList.add('mdc-list-item__graphic')
+        })
+      }
+      if (this.$slots.meta) {
+        this.$slots.meta.map(n => {
+          n.elm.classList.add('mdc-list-item__meta')
+        })
+      }
+    }
   }
 }
 </script>