Update checkbox to use v-model

src/components/mdCheckbox/mdCheckbox.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="md-checkbox" :class="classes">
     <div class="md-checkbox-container" @click="toggleCheck" v-md-ink-ripple="disabled">
-      <input type="checkbox" :name="name" :id="id" :disabled="disabled" :checked="isChecked">
+      <input type="checkbox" :name="name" :id="id" :disabled="disabled" :value="value">
     </div>
 
     <label :for="id || name" class="md-checkbox-label" v-if="hasSlot">
@@ -18,19 +18,21 @@
       name: String,
       value: [String, Boolean],
       id: String,
-      checked: Boolean,
       disabled: Boolean
     },
     data() {
       return {
         hasSlot: true,
-        isChecked: this.checked
+        isChecked: this.value
       };
     },
     computed: {
+      checked() {
+        return this.value;
+      },
       classes() {
         return {
-          'md-checked': Boolean(this.isChecked),
+          'md-checked': Boolean(this.checked),
           'md-disabled': this.disabled
         };
       }
@@ -40,10 +42,15 @@
         if (!this.disabled) {
           this.isChecked = !this.isChecked;
           this.$emit('change', this.isChecked);
+          this.$emit('input', this.isChecked);
         }
       }
     },
     mounted() {
+      if (this.value) {
+        this.isChecked = true;
+      }
+
       this.hasSlot = this.$el.querySelector('label').innerHTML.trim() !== '';
     }
   };

src/docs/pages/Checkbox.vue

@@ -3,28 +3,30 @@
     <h2 class="title">Checkbox</h2>
 
     <div>
-      <md-checkbox id="my-test0" name="my-test0" checked @change="onChange">My beautiful checkbox</md-checkbox>
+      <md-checkbox id="my-test0" name="my-test0" v-model="checkbox">My beautiful checkbox</md-checkbox>
     </div>
 
     <div v-md-theme="'indigo'">
-      <md-checkbox id="my-test1" name="my-test1" checked @change="onChange">Themed</md-checkbox>
+      <md-checkbox id="my-test1" name="my-test1" v-model="checkbox">Themed</md-checkbox>
     </div>
 
     <div v-md-theme="'blue'">
-      <md-checkbox id="my-test2" name="my-test2" checked @change="onChange">Accent Color</md-checkbox>
+      <md-checkbox id="my-test2" name="my-test2" v-model="checkbox">Accent Color</md-checkbox>
     </div>
 
     <div v-md-theme="'orange'">
-      <md-checkbox id="my-test3" name="my-test3" @change="onChange">Fancy colors</md-checkbox>
+      <md-checkbox id="my-test3" name="my-test3" v-model="checkbox">Fancy colors</md-checkbox>
     </div>
 
     <div v-md-theme="'teal'">
-      <md-checkbox id="my-test4" name="my-test4" checked @change="onChange">Really simple</md-checkbox>
+      <md-checkbox id="my-test4" name="my-test4">Really simple</md-checkbox>
     </div>
 
     <div v-md-theme="'teal'">
-      <md-checkbox id="my-test5" name="my-test5" @change="onChange" disabled>Disabled</md-checkbox>
+      <md-checkbox id="my-test5" name="my-test5" v-model="checkbox" disabled>Disabled</md-checkbox>
     </div>
+
+    {{ checkbox }}
   </section>
 </template>
 
@@ -36,6 +38,11 @@
 
 <script>
   export default {
+    data() {
+      return {
+        checkbox: true
+      };
+    },
     methods: {
       onChange(change) {
         console.log('Change', change);