在用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. JATG引脚定义

    JTAG各类接口针脚定义.含义以及SWD接线方式 2018年08月10日 16:04:14 kkwant 阅读数 1165 标签: 接口定义tag   原文地址为:JTAG各类接口针脚定义.含义以及S ...

  2. 解决mysql插入数据l出现"the table is full"的问题

    需要修改Mysql的配置文件my.ini,在[mysqld]下添加/修改两行:tmp_table_size = 256Mmax_heap_table_size = 256M

  3. MVC、MVP、MVVM模型

    在学习vue.react的过程中,总能看到MVVM模型,那么MVVM究竟是什么,下面将我最近看到的资料以及自己的想法总结一下. 与MVVM相似的,还有MVC.MVP,先从MVC.MVP这两个入手,方面 ...

  4. cc23b_demo-函数对象c++ 调用操作符的重载与函数对象-//用模板定义一元谓词、代码示范

    //用模板定义一元谓词. #include <iostream> #include <vector> #include <algorithm> using name ...

  5. 【SEED Labs】DNS Rebinding Attack Lab

    Lab Overview 实验环境下载:https://seedsecuritylabs.org/Labs_16.04/Networking/DNS_Rebinding/ 在这个实验中模拟的物联网设备 ...

  6. <用户输入url按下回车,一直到用户看到界面,这期间经历了什么>

    用户输入url按下回车,一直到用户看到界面,这期间都经历什么? 一.  DNS解析缓存: 1. 找到浏览器缓存解析域名: 2. 找到和 DNS 缓存 ; 3. 找到路由器 DNS 缓存: 4. 找到查 ...

  7. Consul入门初识

    Consul Consul是一个支持多数据中心分布式高可用的服务发现和配置共享的服务软件,由HashiCrop公司用Go语言开发,基于Mozilla Public License 2.0的协议进行开源 ...

  8. 01.scrapy入门

    Scrapy快速入门 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架,它使用Twisted这个异步网络库来处理网络通讯,架构清晰,并且包含了各种中间件接口,可以灵活的完成各种需求. ...

  9. 2020_06_18Mysql事务

    1.事务的基本介绍 1.概念:一个包含多个步骤的事务,被事务管理,要么同时成功,要么同时失败. 2.操作: 2.1 开启事务:start transaction; 2.2 回滚:rollback; 2 ...

  10. rhel7 编写CMakeList.txt编译运行MySQL官方例子代码

    注:若需要参考rhel7上安装MySQL 请 点击此处 1.下面MySQL链接库版本用到了boost(若需要请到官网下载最新链接库和文档和C++连接数据库操作示例) Red Hat Enterpris ...