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

matsp · Apr 23, 2018 · 4dc7e4b · 4dc7e4b
1 parent 63ccb4a
commit 4dc7e4b
Showing 1 changed file with 22 additions and 4 deletions.
diff --git a/components/image-list/ImageListItem.vue b/components/image-list/ImageListItem.vue
@@ -26,12 +26,30 @@ export default {
       default: true
     }
   },
+  data() {
+    return {
+      slotOberserver: null
+    }
+  },
   mounted () {
-    if (this.$slots.image) {
-      this.$slots.image.map(n => {
-        n.elm.classList.add('mdc-image-list__image')
-      })
+    this.updateSlot ()
+    this.slotOberserver = new MutationObserver( () => this.updateSlot())
+    this.slotOberserver.observe(this.$el, {
+      childList: true,
+      subtree: true
+    })
+  },
+  methods: {
+    updateSlot () {
+      if (this.$slots.image) {
+        this.$slots.image.map(n => {
+          n.elm.classList.add('mdc-image-list__image')
+        })
+      }
     }
+  },
+  beforeDestroy () {
+    this.slotOberserver.disconnect()
   }
 }
 </script>