feat(mdc-checkbox): Support array as v-model.

stasson · Apr 6, 2018 · 1c8ca1a · 1c8ca1a
1 parent bfce806
commit 1c8ca1a
Showing 1 changed file with 26 additions and 7 deletions.
diff --git a/components/checkbox/mdc-checkbox.vue b/components/checkbox/mdc-checkbox.vue
@@ -37,13 +37,13 @@ export default {
     event: 'change',
   },
   props: {
-    checked: Boolean,
+    checked: [Boolean, Array],
     indeterminate: Boolean,
     disabled: Boolean,
     label: String,
     'align-end': Boolean,
     value: {
-      type: String,
+      type: [String, Number],
       default() {
         return 'on';
       },
@@ -68,9 +68,7 @@ export default {
     },
   },
   watch: {
-    checked(value) {
-      this.foundation.setChecked(value);
-    },
+    checked: 'setChecked',
     disabled(value) {
       this.foundation.setDisabled(value);
     },
@@ -139,7 +137,7 @@ export default {
     this.foundation.init();
     this.ripple.init();
     this.formField.init();
-    this.foundation.setChecked(this.checked);
+    this.setChecked(this.checked);
     this.foundation.setDisabled(this.disabled);
     this.foundation.setIndeterminate(this.indeterminate);
   },
@@ -149,9 +147,30 @@ export default {
     this.foundation.destroy();
   },
   methods: {
+    setChecked(checked) {
+      this.foundation.setChecked(
+        Array.isArray(checked) ? checked.indexOf(this.value) > -1 : checked,
+      );
+    },
+
     onChange() {
       this.$emit('update:indeterminate', this.foundation.isIndeterminate());
-      this.$emit('change', this.foundation.isChecked());
+      const isChecked = this.foundation.isChecked();
+
+      if (Array.isArray(this.checked)) {
+        const idx = this.checked.indexOf(this.value);
+        if (isChecked) {
+          idx < 0 && this.$emit('change', this.checked.concat(this.value));
+        } else {
+          idx > -1 &&
+            this.$emit(
+              'change',
+              this.checked.slice(0, idx).concat(this.checked.slice(idx + 1)),
+            );
+        }
+      } else {
+        this.$emit('change', isChecked);
+      }
     },
   },
 };