vue antd 表单 You can use `getFieldDecorator(id, options)` instead `v-decorator=“[id, options]“`
antd使用form 表单,出现警告 Warning: You cannot set a form field before rendering a field associated with the value. You can use `getFieldDecorator(id, options)` instead `v-decorator="[id, options]"` to regist
1、 表单渲染 和 数据渲染 顺序问题
原因: 执行setFieldsValue方法时,表单尚未渲染完成,找不到v-decorator,所以报错了,在setFieldsValue方法中,每一个值都要匹配到一个v-decorator
解决:把setFieldsValue方法放在$nextTick后执行,保证 执行顺序为 表单渲染完成 -> setFieldsValue方法 -> setFieldsValue方法找到v-decorator项赋值
2、setFieldsValue 方法多余变量赋值 匹配不到 v-decorator
原因:表单渲染完,但是setFieldsValue依旧报错,因为form表单中v-decorator只有a和b 两个数据项,但是setFieldsValue方法赋值为a,b,c.....,这时候c是没绑定v-decorator,所以会报错
<template>
<a-form :form="form">
<a-form-item label="名称" >
<a-input v-decorator="['name', {initialValue: item.name}]" placeholder="请输入名称" />
</a-form-item>
</a-form>
</template>
<script>
export default {
data () {
return {
form: this.$form.createForm(this), // 表单项
item: {}, // 默认表单项
obj: {
id: 333,
name: 'name'
},
}
},
mounted () {
this.form.setFieldsValue({
...this.obj
})
}
}
</script>
解决:
1、 (推荐)不用setFieldsValue方法,使用v-decorator的initialValue默认value,v-decorator="['name', {initialValue: item.name}]" , 通过修改item变量达到赋值的目的
<template>
<a-form :form="form">
<a-form-item label="名称" >
<a-input v-decorator="['name', {initialValue: item.name}]" placeholder="请输入名称" />
</a-form-item>
</a-form>
</template>
<script>
export default {
data () {
return {
form: this.$form.createForm(this), // 表单项
item: {}, // 默认表单项
obj: {
id: 333,
name: 'name'
},
}
},
mounted () {
this.item = {
...this.obj
}
}
}
</script>
2、使用setFieldsValue方法,但是只赋值当前form绑定v-decorator的值,不方便
<template>
<a-form :form="form">
<a-form-item label="名称" >
<a-input v-decorator="['name', {initialValue: item.name}]" placeholder="请输入名称" />
</a-form-item>
</a-form>
</template>
<script>
export default {
data () {
return {
form: this.$form.createForm(this), // 表单项
item: {}, // 默认表单项
obj: {
id: 333,
name: 'name'
},
}
},
mounted () {
this.form.setFieldsValue({
name: this.obj.name
})
}
}
</script>
更多推荐
所有评论(0)