From b21461f573f29967c81557dfa8429685b94bad35 Mon Sep 17 00:00:00 2001
From: Mats Pfeiffer <mats.pfeiffer@googlemail.com>
Date: Mon, 23 Apr 2018 23:30:05 +0200
Subject: [PATCH] Two-way binding chip selected prop

---
 components/chips/Chip.vue    | 37 +++++++++++++++++++++++++++++++-----
 components/chips/ChipSet.vue |  7 +------
 components/chips/README.md   |  4 ----
 demo/views/ChipsView.vue     |  7 ++++++-
 4 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/components/chips/Chip.vue b/components/chips/Chip.vue
index a0fddc10b..a46875d63 100644
--- a/components/chips/Chip.vue
+++ b/components/chips/Chip.vue
@@ -1,7 +1,8 @@
 <template>
   <div
     class="mdc-chip"
-    tabindex="0">
+    tabindex="0"
+    @MDCChip:interaction="onInteraction()">
     <slot
       name="leadingIcon"
       v-if="$slots['leadingIcon']"/>
@@ -32,21 +33,47 @@ import themeClassMixin from '../base/themeClassMixin.js'
 
 export default {
   mixins: [themeClassMixin],
+  model: {
+    props: 'selected',
+    event: 'change'
+  },
+  props: {
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
-      mdcChip: null,
-      slotOberserver: null
+      mdcChip: undefined,
+      slotObserver: undefined
+    }
+  },
+  computed: {
+    model: {
+      get () {
+        return this.selected
+      },
+      set (value) {
+        this.$emit('change', value)
+      }
     }
   },
   mounted () {
     this.updateSlots()
-    this.slotOberserver = new MutationObserver( () => this.updateSlots())
-    this.slotOberserver.observe(this.$el, {
+    this.slotObserver = new MutationObserver( () => this.updateSlots())
+    this.slotObserver.observe(this.$el, {
       childList: true,
       subtree: true
     })
   },
+  beforeDestroy () {
+    this.slotObserver.disconnect()
+  },
   methods:  {
+    onInteraction () {
+      this.model = this.mdcChip.isSelected()
+    },
     updateSlots () {
       if (this.$slots.leadingIcon) {
         this.$slots.leadingIcon.map((n) => {
diff --git a/components/chips/ChipSet.vue b/components/chips/ChipSet.vue
index b9f75075f..2968a8561 100644
--- a/components/chips/ChipSet.vue
+++ b/components/chips/ChipSet.vue
@@ -25,7 +25,7 @@ export default {
   },
   data () {
     return {
-      mdcChipSet: null
+      mdcChipSet: undefined
     }
   },
   computed: {
@@ -38,11 +38,6 @@ export default {
   },
   mounted () {
     this.mdcChipSet = MDCChipSet.attachTo(this.$el)
-  },
-  methods: {
-    getSelectedChips () {
-      return this.mdcChipSet.foundation_.selectedChips_
-    }
   }
 }
 </script>
diff --git a/components/chips/README.md b/components/chips/README.md
index c25bb13ad..4fbd7dc61 100644
--- a/components/chips/README.md
+++ b/components/chips/README.md
@@ -21,10 +21,6 @@
 | choice | Boolean | false | single selection chips in set |
 | filter | Boolean | false | multiple selection chips in set |
 
-| Method | Description |
-|--------|-------------|
-| getSelectedChips | returns all selected chips of the set as array |
-
 ## Chip
 
 ### Slots
diff --git a/demo/views/ChipsView.vue b/demo/views/ChipsView.vue
index be8e046b6..be70c98cd 100644
--- a/demo/views/ChipsView.vue
+++ b/demo/views/ChipsView.vue
@@ -26,7 +26,7 @@
     <m-layout-grid-cell :span="12">
       <m-typo-title>Choice</m-typo-title>
       <m-chip-set choice>
-        <m-chip>Chip #1</m-chip>
+        <m-chip v-model="choiceSelected">Chip #1</m-chip>
         <m-chip>Chip #2</m-chip>
         <m-chip>Chip #3</m-chip>
       </m-chip-set>
@@ -64,6 +64,11 @@ import Chips from '../../dist/chips'
 Vue.use(Chips)
 
 export default {
+  data () {
+    return {
+      choiceSelected: false
+    }
+  }
 }
 </script>