在用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.的更多相关文章

  1. AntDesign vue学习笔记(七)Form 读写与图片上传

    AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...

  2. antd 父组件获取子组件中form表单的值

    还是拿代码来讲吧,详情见注释 子组件 import React, { Component } from 'react'; import { Form, Input } from 'antd'; con ...

  3. vue项目 Request Payload改成Form Data

    vue项目中提交表单时,请求参数是Request Payload时在main.js中加 axios.defaults.headers.post['Content-Type'] = 'applicati ...

  4. ASP .Net Core MVC如何利用vue提交包含List属性的form表单

    前言 遇到这个问题,是由于自己在mvc项目中使用vue而并不想jquery(人嘛,就是要折腾),并且表单中的一个属性是一个集合. 研究了下Razor如何实现的,用jquery感觉就挺麻烦了,vue用在 ...

  5. 【antd Vue】封装upload图片上传组件(返回Base64)

    最近需要把上传的图片信息存储到数据库,以base64的方式,需要重新封装一下antd的upload组件 1. 使用方法 引入组件然后配置一下即可使用,配置项包括 defaultImageList,需要 ...

  6. JS001. antd vue遍历setFieldsValue表单键值对无效 ( {} -> new Object() )

    问题代码: const tempFieldsValue = this.form.getFieldsValue() Object.keys(tempFieldsValue).map((k) => ...

  7. Antd Vue 问题集合

    1.table列宽问题 在滚动列时,如果要指定列宽,不要指定所有列宽,至少预留一列不执行列宽. 同时:scroll="{ x: width}", width的值要是所有列的宽度之和 ...

  8. vue iview modal弹出框 form表单验证

    一.ref="addApply" :model="addApply" :rules="ruleValidate"   不要忘记prop 二. ...

  9. antd vue 折叠面板 v-for 循环点击无效

    问题描述 实现一个折叠面板点击展开,但是必须点击两次才能展开,第一次无效 <a-collapse-panel v-for="(item, index) in dataMap" ...

随机推荐

  1. 数据库(mysql)基础操作

    DDL(数据定义语言)------>建库,建表 DML(数据操作语言)------>对表中的记录操作增删改查 DQL(数据查询语言)------>对表中的查询操作 DCL(数据控制语 ...

  2. Python在Linux下编译安装

    [准备环境] Linux centos [前言] 1 linux下默认带Python,带的是2.7版本的 ,如果需要升级版本,需要把系统的自带的Python改名或者卸载,再次安装你所需要的Python ...

  3. Win10搭建VM12.0.1虚拟机,虚拟机网络同宿主机ping不通的解决办法

    准备系统学习Linux系统,在电脑搭建了一个CentOS虚拟机,希望能从宿主机连接至虚拟机. 尝试了很多办法,碰到各种坑,最后这个方法成功了! 分享给大家,希望有所帮助. 一.环境 1.宿主机:Win ...

  4. Java并发编程:Callable、Future和FutureTask 实现龟兔赛跑

    1.不清楚的看博客http://www.cnblogs.com/dolphin0520/p/3949310.html 我们使用上面的代码来实现一个龟兔赛跑 package com.weiyuan.te ...

  5. 痞子衡嵌入式:kFlashFile v1.0 - 一个基于Flash的掉电数据存取方案

    大家好,我是痞子衡,是正经搞技术的痞子.今天给大家带来的是痞子衡的个人小项目 - kFlashFile. 痞子衡最近在参与一个基于 i.MXRT1170 的项目,项目有个需求,需要在 Flash 里实 ...

  6. 循环&&数组&&方法&&面向对象

    day03 数值的默认值 类型 初始化的值 byte,short,int,long 0 float,double  0.0 char 空格 boolean false 引用类型 null JVM的内存 ...

  7. Install fail! Error: EBUSY: resource busy or locked, rename

    https://stackoverflow.com/questions/36566236/npm-install-error-code-ebusy-errono-4082 关闭项目所在的文件夹,cmd ...

  8. python基础知识练习2

    1.请写出如下代码的结果: import copy list1 = [1,2,['a','b'],('c','d')] list2 = list1 list3 = copy.copy(list1) l ...

  9. Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性

    译者前言:相信凡是用过 zip() 内置函数的人,都会赞同它很有用,但是,它的最大问题是可能会产生出非预期的结果.PEP-618 提出给它增加一个参数,可以有效地解决大家的痛点. 这是 Python ...

  10. Java1.8的HashMap源码解析

    java1.8是现在用的最多的版本,hashmap是现在用的最多的map,今天我们试图分析一下源码. 数据结构 首先我们注意到数据是存放在一个Node数组里面 transient Node<K, ...