fix

components/checkbox/Group.vue

@@ -14,10 +14,14 @@ export default {
       default: 'ant-checkbox-group',
       type: String,
     },
-    value: {
+    defaultValue: {
       default: () => [],
       type: Array,
     },
+    value: {
+      default: undefined,
+      type: Array,
+    },
     options: {
       default: () => [],
       type: Array,
@@ -26,9 +30,15 @@ export default {
   model: {
     prop: 'value',
   },
+  data () {
+    const { value, defaultValue } = this
+    return {
+      stateValue: value || defaultValue,
+    }
+  },
   computed: {
     checkedStatus () {
-      return new Set(this.value)
+      return new Set(this.stateValue)
     },
   },
   created () {
@@ -40,17 +50,22 @@ export default {
         return false
       }
       const target = event.target
-      const { value, checked } = target
+      const { value: targetValue, checked } = target
+      const { stateValue, value } = this
       let newVal = []
       if (checked) {
-        newVal = [...this.value, value]
+        newVal = [...stateValue, targetValue]
       } else {
-        newVal = [...this.value]
+        newVal = [...stateValue]
-        const index = newVal.indexOf(value)
+        const index = newVal.indexOf(targetValue)
         index >= 0 && newVal.splice(index, 1)
       }
-      this.$emit('input', [...new Set(newVal)])
+      newVal = [...new Set(newVal)]
-      this.$emit('change', [...new Set(newVal)])
+      if (value === undefined) {
+        this.stateValue = newVal
+      }
+      this.$emit('input', newVal)
+      this.$emit('change', newVal)
     },
     setChildCheckbox (children = []) {
       const { options, $slots, checkedStatus } = this
@@ -75,6 +90,7 @@ export default {
   },
   watch: {
     value (val) {
+      this.stateValue = val
       this.setChildCheckbox(this.$slots.default)
     },
   },

components/checkbox/checkbox.vue

@@ -2,7 +2,7 @@
   <label :class="classes">
     <span :class="checkboxClass">
       <input :name="name" type="checkbox" :disabled="disabled"
-        :class="`${prefixCls}-input`" :checked="!!checked"
+        :class="`${prefixCls}-input`" :checked="stateChecked"
         @change="handleChange"
         />
       <span :class="`${prefixCls}-inner`" />
@@ -20,7 +20,8 @@ export default {
       default: 'ant-checkbox',
       type: String,
     },
-    checked: Boolean,
+    defaultChecked: Boolean,
+    checked: { type: Boolean, default: undefined },
     disabled: Boolean,
     isGroup: Boolean,
     value: [String, Number, Boolean],
@@ -31,6 +32,12 @@ export default {
   model: {
     prop: 'checked',
   },
+  data () {
+    const { checked, defaultChecked } = this
+    return {
+      stateChecked: checked === undefined ? defaultChecked : checked,
+    }
+  },
   computed: {
     hasDefaultSlot () {
       return !!this.$slots.default
@@ -42,10 +49,10 @@ export default {
       }
     },
     checkboxClass () {
-      const { prefixCls, indeterminate, checked, disabled } = this
+      const { prefixCls, indeterminate, stateChecked, disabled } = this
       return {
         [`${prefixCls}`]: true,
-        [`${prefixCls}-checked`]: checked,
+        [`${prefixCls}-checked`]: stateChecked,
         [`${prefixCls}-disabled`]: disabled,
         [`${prefixCls}-indeterminate`]: indeterminate,
       }
@@ -55,13 +62,16 @@ export default {
   },
   methods: {
     handleChange (event) {
-      const checked = event.target.checked
+      const targetChecked = event.target.checked
-      this.$emit('input', checked)
+      this.$emit('input', targetChecked)
-      const { name, value } = this
+      const { name, value, checked } = this
+      if (checked === undefined) {
+        this.stateChecked = targetChecked
+      }
       const target = {
         name,
         value,
-        checked,
+        checked: targetChecked,
       }
       this.$emit('change', {
         target,
@@ -77,5 +87,10 @@ export default {
       }
     },
   },
+  watch: {
+    checked (val) {
+      this.stateChecked = val
+    },
+  },
 }
 </script>

examples/checkbox.vue

@@ -1,8 +1,9 @@
 <template>
   <div>
-    <Checkbox :checked="true" @change="change" name="test" value="123" />
+    <Checkbox :defaultChecked="true" @change="change" value="1">1</Checkbox>
+    <Checkbox v-model="checked" @change="change" value="2">2</Checkbox>
     <Checkbox @change="change" v-model="checked" name="test" value="123">Checkbox</Checkbox>
-    <Checkbox :disabled="true" @change="change" v-model="checked" name="test2" value="222">Checkbox</Checkbox>
+    <Checkbox @change="change" v-model="checked" name="test2" value="222">Checkbox</Checkbox>
 
     <CheckboxGroup v-model="value" @change="change">
       <AntButton @click="handleClick">
@@ -18,7 +19,7 @@
       <Checkbox name="test3" value="3" @change="change">Checkbox3</Checkbox>
       <Checkbox v-if="showMore" name="test4" value="4">Checkbox4</Checkbox>
     </CheckboxGroup>
-    <CheckboxGroup :options="options" v-model="value1" @change="change"></CheckboxGroup>
+    <CheckboxGroup :options="options" :defaultValue="['Apple']" @change="change"></CheckboxGroup>
   </div>
 </template>
 <script>