我正在使用 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
设置它。我该如何解决?提前致谢
最佳答案
因为我是 ant-design-vue 的新手,经过一天的研究,解决方案是将值更改为 v-model 并删除子组件中的值 Prop
<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>
关于vue.js - 如何修复警告 : `getFieldDecorator` will override `value` , 所以请不要直接设置 `value and v-model` 并使用 `setFieldsValue` 设置它。?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56321849/