fix(switch): custom checkedChildren unexpected (#4528)

* fix(switch): custom checkedChildren unexpected

* Update index.tsx

Co-authored-by: tangjinzhou <[email protected]>

Author: zkwolf

components/switch/__tests__/index.test.js

@@ -70,4 +70,35 @@ describe('Switch', () => {
     });
     expect(checked.value).toBe(1);
   });
+
+  it('customize checked value and children should work', async () => {
+    resetWarned();
+    const checked = ref(1);
+    const onUpdate = val => (checked.value = val);
+    const wrapper = mount({
+      render() {
+        return (
+          <Switch
+            {...{ 'onUpdate:checked': onUpdate }}
+            checked={checked.value}
+            unCheckedValue={1}
+            checkedValue={2}
+            checkedChildren="on"
+            unCheckedChildren="off"
+          />
+        );
+      },
+    });
+    await asyncExpect(() => {
+      wrapper.find('button').trigger('click');
+    });
+    expect(checked.value).toBe(2);
+    expect(wrapper.find('.ant-switch-inner').text()).toBe('on');
+
+    await asyncExpect(() => {
+      wrapper.find('button').trigger('click');
+    });
+    expect(checked.value).toBe(1);
+    expect(wrapper.find('.ant-switch-inner').text()).toBe('off');
+  });
 });

components/switch/index.tsx

@@ -134,6 +134,7 @@ const Switch = defineComponent({
       [`${prefixCls.value}-disabled`]: props.disabled,
       [prefixCls.value]: true,
     }));
+
     return () => (
       <Wave insertExtraNode>
         <button
@@ -160,7 +161,7 @@ const Switch = defineComponent({
         >
           {props.loading ? <LoadingOutlined class={`${prefixCls.value}-loading-icon`} /> : null}
           <span class={`${prefixCls.value}-inner`}>
-            {checked.value
+            {checkedStatus.value
               ? getPropsSlot(slots, props, 'checkedChildren')
               : getPropsSlot(slots, props, 'unCheckedChildren')}
           </span>