From f9e4da734d519f90fa6e228404b4307968bde2d7 Mon Sep 17 00:00:00 2001
From: msidolphin <msidolphin@outlook.com>
Date: Mon, 14 Jun 2021 20:20:02 +0800
Subject: [PATCH] fix: Checkbox checked optional cannot control state issue
 (#2046) (#2122)

Co-authored-by: yangyu8 <yangyu8@kingsoft.com>
---
 packages/checkbox/__tests__/checkbox.spec.ts | 8 ++++++++
 packages/checkbox/src/useCheckbox.ts         | 6 +++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/checkbox/__tests__/checkbox.spec.ts b/packages/checkbox/__tests__/checkbox.spec.ts
index 90c171e123..51c7bf070a 100644
--- a/packages/checkbox/__tests__/checkbox.spec.ts
+++ b/packages/checkbox/__tests__/checkbox.spec.ts
@@ -330,4 +330,12 @@ describe('check-button', () => {
     expect(wrapper.vm.checked).toBe(true)
     expect(wrapper.vm.checklist).toEqual(['a'])
   })
+
+  test('checked', () => {
+    const wrapper = _mount(
+      `<el-checkbox checked />`,
+      () => ({}))
+    expect(wrapper.find('.el-checkbox').classes().toString()).toMatch('is-checked')
+  })
+
 })
diff --git a/packages/checkbox/src/useCheckbox.ts b/packages/checkbox/src/useCheckbox.ts
index ceb75a8084..2988f86601 100644
--- a/packages/checkbox/src/useCheckbox.ts
+++ b/packages/checkbox/src/useCheckbox.ts
@@ -34,7 +34,7 @@ export const useCheckboxGroup = () => {
 }
 
 const useModel = (props: ICheckboxProps) => {
-  let selfModel = false
+  const selfModel = ref(false)
   const { emit } = getCurrentInstance()
   const { isGroup, checkboxGroup } = useCheckboxGroup()
   const isLimitExceeded = ref(false)
@@ -43,7 +43,7 @@ const useModel = (props: ICheckboxProps) => {
     get() {
       return isGroup.value
         ? store.value
-        : props.modelValue ?? selfModel
+        : props.modelValue ?? selfModel.value
     },
 
     set(val: unknown) {
@@ -60,7 +60,7 @@ const useModel = (props: ICheckboxProps) => {
         isLimitExceeded.value === false && checkboxGroup?.changeEvent?.(val)
       } else {
         emit(UPDATE_MODEL_EVENT, val)
-        selfModel = val as boolean
+        selfModel.value = val as boolean
       }
     },
   })