Skip to content

自定义表单组件一直报warning #1076

@mkanako

Description

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

Version

1.3.13

Environment

Chrome 75

Reproduction link

https://vue.ant.design/components/form-cn/#components-form-demo-customized-form-controls

Steps to reproduce

对input做一层简单封装

<template>
  <div>
    <a-input
      v-bind="$attrs"
      :value="input"
      @change="triggerChange"
    />
  </div>
</template>
<script>
export default {
  name: 'CustomInput',
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  inheritAttrs: false,
  data () {
    return {
      input: this.value,
    }
  },
  watch: {
    value (val) {
      this.input = val
    },
  },
  methods: {
    triggerChange (val) {
      this.input = val
      this.$emit('change', val)
    },
  },
}
</script>
使用
<a-form-item label="CustomInput">
<CustomInput
    v-decorator="[
    'CustomInput',
    {
        rules: [{ required: true, message: '请输入' }]}
    ]"
/>
</a-form-item>

What is actually happening?

控制台报warning:

CustomInput default value can not collect, please use option.initialValue to set default value.

按照提示去设置initialValue,还是有问题

<a-form-item label="CustomInput">
<CustomInput
    v-decorator="[
    'CustomInput',
    {
        initialValue:'',//空值也不行,必须不为空才行??
        rules: [{ required: true, message: '请输入' }]}
    ]"
/>
</a-form-item>

What is expected?

希望能像input一样,不需要设置initialValue也正常

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions