vue 表单中使用 v-decorator 绑定 switch `value` is not validate prop, do you mean `checked`

原创于 2020-08-28 16:30:31 发布 · 5.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

23 篇文章

订阅专栏

本文解决在Vue表单中使用Ant Design Switch组件时出现的警告问题，通过设置valuePropName和initialValue属性，确保Switch组件能够正常工作并具有默认状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 表单中使用 v-decorator 绑定 switch

问题描述

warning.js?2149:7 Warning: [antdv: Switch] value is not validate prop, do you mean checked?

这样一个异常，是因为没有指定valuePropName属性，
然后指定了之后，表单中的switch却没有一个默认的值，
所以加上initialValue 这样就可以了，默认打开就是true，关闭就是false
代码如下！

        <a-form-item
          label="短信通知"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-switch 
          :disabled="showable" 
           v-decorator="['SendSms', {rules: [{required: true, message: '请输入选择'}],initialValue: true,valuePropName: 'checked'}] ">
            <a-icon slot="checkedChildren" type="check" />
            <a-icon slot="unCheckedChildren" type="close" />
          </a-switch>
        </a-form-item>