[Antd-vue] Warning: You cannot set a form field before rendering a field associated with the value.
在用ant-design-vue的框架中,使用到了这种场景,就是点击编辑按钮,弹出modal模态框,渲染modal模态框中的form表单页面,并给表单赋值,但是在给表单赋值的时候,总是会报错。
错误提示: Warning: You cannot set a form field before rendering a field associated with the value.
经过一番查找后发现,造成这种原因一般有以下几个原因:
1.使用了表单的方法setFieldsValue(),来设置一组输入控件的值,传入的值为object,但是传入的值要和表单的值一一对应,能少传不能多传。
遇到这种情况的解决方式为:form渲染需要什么值你就传什么值
方式1:一个一个传
this.form.setFieldsValue({ note: '123', mark: '456' })
方式2:
add (record) { //record:需要引用的值
this.visible = true
this.mdl = Object.assign({}, record) // 浅拷贝
this.form.setFieldsValue(pick(this.mdl, 'note', 'mark')) // loadsh的pick方法
}
但是你会发现这么些还是报同样的错误。按照错误提示的原意:不能在表单渲染之前赋值
2.调用setFieldsValue()方法,需要放在$nextTick()函数中执行,改为如下即可:
this.$nextTick(()=>{
this.form.setFieldsValue(pick(this.mdl, 'note', 'mark')) // loadsh的pick方法
})
一般到这里就能解决问题了,如果还在报同样的错误,那就这样吧:
3.再放到setTimeout()方法中
this.$nextTick(() => {
setTimeout(() => {
this.form.setFieldsValue(pick(this.mdl, 'note', 'mark')) // loadsh的pick方法
})
})
[Antd-vue] Warning: You cannot set a form field before rendering a field associated with the value.的更多相关文章
- AntDesign vue学习笔记(七)Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
- antd 父组件获取子组件中form表单的值
还是拿代码来讲吧,详情见注释 子组件 import React, { Component } from 'react'; import { Form, Input } from 'antd'; con ...
- vue项目 Request Payload改成Form Data
vue项目中提交表单时,请求参数是Request Payload时在main.js中加 axios.defaults.headers.post['Content-Type'] = 'applicati ...
- ASP .Net Core MVC如何利用vue提交包含List属性的form表单
前言 遇到这个问题,是由于自己在mvc项目中使用vue而并不想jquery(人嘛,就是要折腾),并且表单中的一个属性是一个集合. 研究了下Razor如何实现的,用jquery感觉就挺麻烦了,vue用在 ...
- 【antd Vue】封装upload图片上传组件(返回Base64)
最近需要把上传的图片信息存储到数据库,以base64的方式,需要重新封装一下antd的upload组件 1. 使用方法 引入组件然后配置一下即可使用,配置项包括 defaultImageList,需要 ...
- JS001. antd vue遍历setFieldsValue表单键值对无效 ( {} -> new Object() )
问题代码: const tempFieldsValue = this.form.getFieldsValue() Object.keys(tempFieldsValue).map((k) => ...
- Antd Vue 问题集合
1.table列宽问题 在滚动列时,如果要指定列宽,不要指定所有列宽,至少预留一列不执行列宽. 同时:scroll="{ x: width}", width的值要是所有列的宽度之和 ...
- vue iview modal弹出框 form表单验证
一.ref="addApply" :model="addApply" :rules="ruleValidate" 不要忘记prop 二. ...
- antd vue 折叠面板 v-for 循环点击无效
问题描述 实现一个折叠面板点击展开,但是必须点击两次才能展开,第一次无效 <a-collapse-panel v-for="(item, index) in dataMap" ...
随机推荐
- 深度学习中环境配置的一些经验总结(conda 常用命令)
前两个月参加了学校的国创项目,和一个外院的同学组队.课题是基于深度学习的新闻图片中网络暴力元素的检查. 6月末最后一门试考完,正式开始暑假,便有了大把时间搞这个国创项目(反正没有其他事干).两个组凑钱 ...
- WeChair——团队展示
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 团队名称 WeChair 这个作业要求在哪里 团队作业第一次 这个作业的目标 团队合作,项目开发 作业正文 如下 其他参考文献 ...
- shell编程之系统环境变量
点后面加上空格+配置文件等价于source 配置文件 常见的系统环境变量的配置 Bash_profile和.bashrc存在在家目录下,~表示家目录 [root@localhost home]# cd ...
- 如何运行Spring Boot项目
背景 帮别人指导一个Spring Boot项目,它在本地把项目push到git服务器上,然后在部署的服务器上把代码pull下来(我猜应该是这个流程) 然后他问我这项目怎么运行? 我当时就懵了,因为我平 ...
- 如何用Tesseract做日文OCR(c#实现)
首先做一下背景介绍,Tesseract是一个开源的OCR组件,主要针对的是打印体的文字识别,对手写的文字识别能力较差,支持多国语言(中文.英文.日文.韩文等).是开源世界里最强的一款OCR组件.当然和 ...
- mybatis源码配置文件解析之五:解析mappers标签(解析XML映射文件)
在上篇文章中分析了mybatis解析<mappers>标签,<mybatis源码配置文件解析之五:解析mappers标签>重点分析了如何解析<mappers>标签中 ...
- asp.net 修饰符介绍(关于public、private、protected、internal)
1.private修饰符 private修饰符用于设置类或类成员的访问权限仅为所属类的内部,private也被称为私有修饰符.某些时候需要访问私有类成员时,可通过get和set访问器读取或修改. 2. ...
- Spring 获取单例流程(二)
读完这篇文章你将会收获到 Spring 中 prototype 类型的 bean 如何做循环依赖检测 Spring 中 singleton 类型的 bean 如何做循环依赖检测 前言 继上一篇文章 S ...
- mysql根据一张表更新另一张表数据
UPDATE channelcountry, appywproducts SET channelcountry.ChannelName = appywproducts.YWNameCN WHERE c ...
- (私人收藏)React教程手册
React教程手册 https://pan.baidu.com/s/1ka2PJ54HgqJ8lC6XgbvdLg pedx React 教程 含有3个附件,如下: react.js react-do ...