[Vue warn]: Invalid prop: type check failed for prop "checked". Expected Boolean, got Event

[liudonghua123]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.4.2

Environment

Win 10 1903, Chrome 78, vue ^2.6.10

Reproduction link

https://github.com/liudonghua123/antd-demo

Steps to reproduce

1. vue create antd-demo
2. vue add ant-design
3. write a component mixed v-decorator and v-model like the following.

// FormDemo.vue
<template>
  <a-form :form="form">
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="Name"
    >
      <a-input
        v-decorator="[
          'username',
          { rules: [{ required: true, message: 'Please input your name' }] }
        ]"
        placeholder="Please input your name"
      />
    </a-form-item>
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="Nickname"
    >
      <a-input
        v-decorator="[
          'nickname',
          {
            rules: [
              { required: checkNick, message: 'Please input your nickname' }
            ]
          }
        ]"
        placeholder="Please input your nickname"
      />
    </a-form-item>
    <a-form-item
      :label-col="formTailLayout.labelCol"
      :wrapper-col="formTailLayout.wrapperCol"
    >
      <a-checkbox v-model="checkNick">
        Nickname is required
      </a-checkbox>
    </a-form-item>
    <a-form-item
      :label-col="formTailLayout.labelCol"
      :wrapper-col="formTailLayout.wrapperCol"
    >
      <a-button type="primary" @click="check">
        Check
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8 }
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 }
};
export default {
  data() {
    return {
      checkNick: false,
      formItemLayout,
      formTailLayout,
      form: this.$form.createForm(this, { name: "dynamic_rule" })
    };
  },
  methods: {
    check() {
      this.form.validateFields(err => {
        if (!err) {
          // console.info("success");
        }
      });
    },
  }
};
</script>

4. Use the component in App.vue
5. Click the checkbox in the browser page

What is expected?

No warn or error shown in console

What is actually happening?

---

The callback in model is called twice, the first one the value argument was a event object, the the second one with the correct true/false value.

[sendya]

no problem
https://codesandbox.io/s/vue-antd-template-3db90

Please try using checked prop or @change

https://www.antdv.com/components/checkbox-cn/#API

---

vue.js 2.6.0-beta.1 What changed?

[sendya]

However, `v-model` can work. pls review codesandbox demo. and this is a bug in `vue 2.6.0-beta.1` liudonghua <[email protected]> 于2019年10月30日周三 上午8:21写道：

…

Hi @sendya <https://github.com/sendya> , I understand your answer, the key is change v-model to checked and @change, write the following code <a-checkbox :checked="checkNick" @change="e => checkNick = e.target.checked" >Nickname is required</a-checkbox> instead of <a-checkbox v-model="checkNick"> Nickname is required </a-checkbox> However, that's just another way to skip the v-model in a-checkbox issue, I can also change v-model to v-decorator style. It does not fix the possible problem. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1356?email_source=notifications&email_token=ABJHO7QPF4RVWDV7IX6OPM3QRDHSLA5CNFSM4JGFJL52YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECSQLKA#issuecomment-547685800>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABJHO7QSARZV4TI33RZSOU3QRDHSLANCNFSM4JGFJL5Q> .

[liudonghua123]

@sendya Hi, I tried you codesanbox example, it's seems ok, but when you download and run locally, you will see the same errors in console.

[liudonghua123]

I can see the same problem in codesanbox now.

[sendya]

I can see the same problem in codesanbox now.

vue version 2.5.22

[sendya]

v-model $emit input is a bug in 2.6.0-beta.1 and latest

[liudonghua123]

It's a bug existed from vue 2.6.0-beta.1 to the latest 2.6.10?

[liudonghua123]

If I change a-checkbox to input type="checkbox", this error disappeared.

https://codesandbox.io/s/vue-antd-template-cxwbr?fontsize=14

[liudonghua123]

@sendya @tangjinzhou Does this issue fixed?

[tangjinzhou]

2e9b300 @liudonghua123

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.