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

matsp · Apr 23, 2018 · b24651c · b24651c
1 parent 58c0ea4
commit b24651c
Showing 1 changed file with 23 additions and 14 deletions.
diff --git a/components/card/Card.vue b/components/card/Card.vue
@@ -61,20 +61,29 @@ export default {
     }
   },
   mounted () {
-    if (this.$slots.actionButtons) {
-      this.$slots.actionButtons.map((n) => {
-        n.elm.classList.add('mdc-card__action')
-        n.elm.classList.add('mdc-card__action--button')
-      })
-    }
-
-    if (this.$slots.actionIcons) {
-      this.$slots.actionIcons.map((n) => {
-        n.elm.classList.add('mdc-card__action')
-        n.elm.classList.add('mdc-card__action--icon')
-        n.elm.setAttribute('tabindex', '0')
-        n.elm.setAttribute('role', 'button')
-      })
+    this.updateSlots()
+    this.slotOberserver = new MutationObserver( () => this.updateSlots())
+    this.slotOberserver.observe(this.$el, {
+      childList: true,
+      subtree: true
+    })
+  },
+  methods: {
+    updateSlots () {
+      if (this.$slots.actionButtons) {
+        this.$slots.actionButtons.map((n) => {
+          n.elm.classList.add('mdc-card__action')
+          n.elm.classList.add('mdc-card__action--button')
+        })
+      }
+      if (this.$slots.actionIcons) {
+        this.$slots.actionIcons.map((n) => {
+          n.elm.classList.add('mdc-card__action')
+          n.elm.classList.add('mdc-card__action--icon')
+          n.elm.setAttribute('tabindex', '0')
+          n.elm.setAttribute('role', 'button')
+        })
+      }
     }
   }
 }