Как исправить Предупреждение: `getFieldDecorator` переопределит` value`, поэтому, пожалуйста, не устанавливайте `value и v-model` напрямую и используйте` setFieldsValue` для его установки.?

Question

Я кодирую пользовательский компонент формы проверки, используя ant-design-vue

Я изменил свой код почти так же, как пример, показанный на официальном сайте, но все равно получил предупреждение, единственное отличие - это пример использования шаблона для определения дочернего компонента, но я использую один файл vue

//parent component
...some other code
<a-form-item
    label="account"
>
  <ReceiverAccount
      v-decorator="[
       'receiverAccount',
        {
          initialValue: step.receiverAccount,
          rules: [
           {
              required: true,
              message: 'need account',                      

           }
          ]
        }
      ]"
  />
</a-form-item>
...some other code

//child component
<template>
    <a-input-group compact>
        <a-select
            :value="type"
            @change="handleTypeChange"
        >
            <a-select-option value="alipay">alipay</a-select-option>
            <a-select-option value="bank">bank</a-select-option>
        </a-select>
        <a-input
            :value="number"
            @change="handleNumberChange"
        />
    </a-input-group>
</template>

<script>
export default {
    props: {
        value: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        const { type, number } = this.value
        return {
            type: type || 'alipay',
            number: number || ''
        }
    },
    watch: {
        value(val = {}) {
            this.type = val.type || 'alipay'
            this.number = val.number || ''
        }
    },
    methods: {
        handleTypeChange(val) {
            this.triggerChange({ val })
        },
        handleNumberChange(e) {
            const number = parseInt(e.target.value || 0, 10)
            if (isNaN(number)) {
                return
            }
            this.triggerChange({ number })
        },
        triggerChange(changedValue) {
            this.$emit('change', Object.assign({}, this.$data, changedValue))
        }
    }
}
</script>

Я ожидаю, что все в порядке, но на самом деле я получил 'Предупреждение: getFieldDecorator переопределит value, поэтому, пожалуйста, не устанавливайте value and v-model напрямую и используйте setFieldsValue для его установки.'

Как я могу это исправить? Заранее спасибо

Answer 1

, потому что я новичок в ant-design-vue, после однодневного исследования, решение - это изменение: значение в v-модель и удаление ценностей в дочернем компоненте

<template>
    <a-input-group compact>
        <a-select
            v-model="type"
            @change="handleTypeChange"
        >
            <a-select-option value="alipay">alipay</a-select-option>
            <a-select-option value="bank">bank</a-select-option>
        </a-select>
        <a-input
            v-model="number"
            @change="handleNumberChange"
        />
    </a-input-group>
</template>