Fix #56, Work on #15

buefy · May 10, 2017 · 38a0ac8 · 38a0ac8
1 parent d15bb74
commit 38a0ac8
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 23 deletions.
diff --git a/src/components/checkbox/Checkbox.vue b/src/components/checkbox/Checkbox.vue
@@ -23,7 +23,7 @@
         },
         data() {
             return {
-                newValue: this.value
+                newValue: this.value || this.checked
             }
         },
         watch: {
@@ -47,9 +47,6 @@
                 this.$emit('input', value)
                 this.$parent.isCheckboxGroup && this.$parent.updateValue()
             }
-        },
-        mounted() {
-            this.newValue = this.checked
         }
     }
 </script>
diff --git a/src/components/checkbox/CheckboxGroup.vue b/src/components/checkbox/CheckboxGroup.vue
@@ -27,7 +27,7 @@
         methods: {
             /**
              * Update the checkedList property with all the Checkboxes that are active.
-             * This is called from Checkbox child.
+             * This is called from a child Checkbox.
              * Emit input event to update the user v-model.
              */
             updateValue() {

diff --git a/src/components/radio/Radio.vue b/src/components/radio/Radio.vue
@@ -5,7 +5,7 @@
             :disabled="disabled"
             :checked="isChecked"
             :name="name"
-            :value="this.value"
+            :value="value"
             @change="changed">
         <span><slot></slot></span>
     </label>
@@ -25,6 +25,10 @@
             }
         },
         methods: {
+            /**
+             * Input change listener.
+             * Call updateValue from parent.
+             */
             changed(event) {
                 this.$parent.updateValue(this.value, event)
             }

diff --git a/src/components/radio/RadioButton.vue b/src/components/radio/RadioButton.vue
@@ -4,15 +4,15 @@
             type="button"
             class="radio button"
             :disabled="disabled"
-            :class="[isChecked ? type : '', size]"
+            :class="[isChecked ? type : null, size]"
             @click="changed">
             <slot></slot>
             <input
                 type="radio"
                 :disabled="disabled"
                 :checked="isChecked"
                 :name="name"
-                :value="this.value">
+                :value="value">
         </button>
     </p>
 </template>
@@ -31,13 +31,16 @@
         },
         data() {
             return {
-                // Used internally by Radio Group
-                size: '',
+                size: null,
                 isChecked: false,
-                isRadioButton: true
+                isRadioButtonComponent: true // Used internally by Radio Group
             }
         },
         methods: {
+            /**
+             * Input change listener.
+             * Call updateValue from parent.
+             */
             changed(event) {
                 this.$parent.updateValue(this.value, event)
             }

diff --git a/src/components/radio/RadioGroup.vue b/src/components/radio/RadioGroup.vue
@@ -13,30 +13,42 @@
         },
         data() {
             return {
-                isRadioGroupComponent: true, // Used internally by Radio and Radio Button
-                isRadioButtonGroup: false // Used internally by Radio Button
+                isRadioGroupComponent: true, // Used internally by Radio and RadioButton
+                isRadioButtonGroup: false // Used internally by RadioButton
             }
         },
         watch: {
+            /**
+             * Set checked state on the correct children Radio
+             * or RadioButton when v-model change.
+             */
             value() {
-                this.findChecked()
+                this.initChecked()
             }
         },
         methods: {
+            /**
+             * This is called from a child Radio or RadioButton.
+             * Emit input event to update the user v-model.
+             */
             updateValue(value, event) {
                 this.$emit('change', value, event)
                 this.$emit('input', value)
             },
-            findChecked() {
+
+            /**
+             * Set checked state on the correct children Radio or RadioButton based on v-model.
+             */
+            initChecked() {
                 this.$children.forEach((child) => {
                     child.size = this.buttonSize
-                    this.isRadioButtonGroup = child.isRadioButton
+                    this.isRadioButtonGroup = child.isRadioButtonComponent
                     child.isChecked = this.value === child.value
                 })
             }
         },
         mounted() {
-            this.findChecked()
+            this.initChecked()
         }
     }
 </script>
diff --git a/src/components/switch/Switch.vue b/src/components/switch/Switch.vue
@@ -23,21 +23,23 @@
         },
         data() {
             return {
-                newValue: this.value
+                newValue: this.value || this.checked
             }
         },
         watch: {
+            /**
+             * When v-model change, set internal value.
+             */
             value(value) {
                 this.newValue = value
             },
+
+            /**
+             * Emit input event to update the user v-model.
+             */
             newValue(value) {
                 this.$emit('input', value)
             }
-        },
-        mounted() {
-            if (this.checked) {
-                this.newValue = this.checked
-            }
         }
     }
 </script>