Cannot read properties of undefined (reading ‘resetFields‘)“ 报错解决

在这里插入图片描述
遇到这种报错 先去相关页面搜索关键字 定位到具体的报错代码
Cannot read properties of undefined (reading ‘resetFields’)"
关键字:resetFields
此方法作用:对整个表单进行重置 将所有字段值重置为初始值并移除校验结果

报错场景:点击编辑按钮 弹窗弹出时 控制台报错

	init(id) {
		this.visible = true
		this.$refs['dataForm'].resetFields()
		if(id) {
			// 发送axios请求 获取数据反显到表单上
		}
	},		

原因:this.$refs['dataForm'].resetFields()在执行的时候 表单的dom还没有渲染出来
因为还没渲染出 所以用$refs调用名叫‘dataForm’身上的resetFields方法 是undefined

解决方法: 使用$nextTick包上 等待dom更新之后再重置

	init(id) {				
		this.visible = true				
		this.$nextTick(() => {
			this.$refs['dataForm'].resetFields()
			if(id) {
				// 发送axios请求 获取数据反显到表单上
			}
		})				
	},		

也可以先判断 确认能获取到dataForm再重置

if (this.$refs.dataForm != undefined){
    this.$refs["dataForm"].resetFields();
 }

另外还有一种报错情况 编辑弹窗打开后 某项数据明明有值 却报必填校验错误
控制台:xxx is required
在这里插入图片描述
这种情况大概率是 当前数据项 input里的v-model和el-form-item上的prop绑定的值不一致

<el-col :span="12">
	<el-form-item label="数据项" prop="dataItems">
		<el-input clearable v-model="dataForm.dataItem" placeholder="数据项"></el-input>
	</el-form-item>
</el-col>

同改为dataItem即可

<el-col :span="12">
	<el-form-item label="数据项" prop="dataItem">
		<el-input clearable v-model="dataForm.dataItem" placeholder="数据项"></el-input>
	</el-form-item>
</el-col>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/174498.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

森林之子/Sons Of The Forest V42457 资源分享

游戏介绍&#xff1a; 视频介绍&#xff1a; 森林之子 资源分享 这里是引用 你被派到了一座孤岛上&#xff0c;寻找一位失踪的亿万富翁&#xff0c;结果却发现自己深陷被食人生物占领的炼狱之地。你需要制作工具和武器、建造房屋&#xff0c;倾尽全力生存下去&#xff0c;无论…

idea开发jface、swt环境搭建

背景 jface、swt很难找到合适的maven仓库来下载配套的版本idea对eclipse套件不友好eclipse的windowbuilder固然很好&#xff0c; 但本人更喜欢idea编程&#xff0c; 互相取长补短 下载套件 进入swt下载界面 以当前最新的4.29为例&#xff0c; 点击&#xff1a; 找到全部并…

spring boot零配置

spring boot是如何选择tomcat还是Jett作为底层服务器的呢&#xff1f; springboot通过ServletWebServerApplicationContext的onRefresh()方法&#xff0c;会创建web服务 protected void onRefresh() {super.onRefresh();try {// 创建web服务createWebServer();}catch (Throwab…

【Spring Boot】如何在Linux系统中快速启动Spring Boot的jar包

在Linux系统中先安装java的JDK 然后编写下列service.sh脚本&#xff0c;并根据自己的需求只需要修改export的log_path、exec_cmd参数即可 # 配置运行日志输出的路径 export log_path/usr/local/project/study-pro/logs # 当前服务运行的脚本命令 export exec_cmd"nohup /u…

Python---函数的应用案例(多个)

案例&#xff1a;使用print方法打印一条横线 print(- * 40) 案例&#xff1a;对上个案例进行升级&#xff0c;可以根据输入的num数值&#xff0c;生成指定数量的横线 def print_lines(num, length):""" print_lines函数主要作用用于生成多条指定长度的横线&…

科技赋能,创新发展!英码科技受邀参加2023中国创新创业成果交易会

11月17日至19日&#xff0c;2023中国创新创业成果交易会&#xff08;简称&#xff1a;创交会&#xff09;在广州市广交会展馆圆满举行。英码科技受邀参加本届创交会&#xff0c;并在会场展示了创新性的AIoT产品、深元AI引擎和行业热门解决方案。 据介绍&#xff0c;本届创交会由…

敏捷DevOps专家王立杰:端到端DevOps持续交付的5P法则 | IDCF

今天有一个流行的英文缩写词用来刻画这个风云变幻的时代&#xff1a;VUCA&#xff08;乌卡时代&#xff09;。四个英文字母分别表示动荡性&#xff08;Volatility&#xff09;、不确定性&#xff08;Uncertainty&#xff09;、复杂性&#xff08;Complexity&#xff09;和模糊性…

shell 脚本语句

目录 条件语句 test 命令 比较整数数值 字符串比较 命令举 条件逻辑测试操作 组合写法 举例 双中括号 ​编辑 ( ) / { } if 语句的结构 case 语句 脚本举例 识别 yes 和 no 脚本 检查磁盘使用情况脚本 新建用户以及随机设置用户密码的脚本 补充命令 [RANDOM…

【C++进阶之路】第五篇:哈希

文章目录 一、unordered系列关联式容器1.unordered_map&#xff08;1&#xff09;unordered_map的介绍&#xff08;2&#xff09;unordered_map的接口说明 2. unordered_set3.性能对比 二、底层结构1.哈希概念2.哈希冲突3.哈希函数4.哈希冲突解决&#xff08;1&#xff09;闭散…

【C++】C++11(1)

文章目录 一、C11简介二、统一的列表初始化1.&#xff5b;&#xff5d;初始化2.std::initializer_list 三、声明1.auto2.decltype3.nullptr 四、STL中一些变化五、右值引用和移动语义1.左值引用和右值引用2.左值引用与右值引用比较3.右值引用使用场景和意义4.右值引用引用左值及…

什么是办公RPA?办公RPA解决什么问题?办公RPA实施难点在哪里?

什么是办公RPA&#xff1f; 办公RPA是一种能够模拟人类在计算机上执行任务的自动化软件。它可以在没有人工干预的情况下&#xff0c;执行重复的、规则化的任务&#xff0c;例如数据输入、网页爬取、电子邮件管理等。办公RPA可以帮助企业提高工作效率&#xff0c;降低人力成本&…

px4+vio实现无人机室内定位

文章主要讲述px4 如何利用vins_fusion里程计数据实现在室内定位功能。 文章基于以下软、硬件展开。 硬件软件机载电脑&#xff1a; Intel NUC系统&#xff1a;Ubuntu 20.04相机&#xff1a; Intel Realsense D435iros&#xff1a;noetic飞控&#xff1a;Pixhawk 2.4.8固件&am…

Golang基础-面向对象篇

文章目录 struct结构体类的表示与封装类的继承多态的基本要素与实现interface空接口反射变量的内置pairreflect包解析Struct TagStruct Tag在json中的应用 struct结构体 在Go语言中&#xff0c;可以使用type 关键字来创建自定义类型&#xff0c;这对于提高代码的可读性和可维护…

城市易涝点怎么安装万宾科技内涝积水监测仪?

城市内涝是多个城市广泛存在的问题&#xff0c;经常给城市的居民和基础设施带来一些安全威胁。暴雨引发的道路积水和交通中断、财产损失&#xff0c;甚至公共安全威胁都是城市管理者需要提前预防的问题。为了解决这些问题&#xff0c;内涝积水监测仪的应用是一大重要的举措&…

2021秋招-算法-递归

算法-递归 教程: ⭐告别递归&#xff0c;谈谈我的一些经验 LeetCode刷题总结-递归篇 基础框架 leetcode刷题 1.leetcode-101. 对称二叉树-简单 101. 对称二叉树 给定一个二叉树&#xff0c;检查它是否是镜像对称的。 例如&#xff0c;二叉树 [1,2,2,3,4,4,3] 是对称的。…

docker通过挂载conf文件启动redis

初衷&#xff1a;之前直接在启动脚本中没有挂载配置文件&#xff0c;并且直接设置了密码等&#xff0c;后续要使用集群&#xff0c;苦于无法修改配置&#xff0c;进入redis容器也找不到redis.conf&#xff0c;所以写这个文章用来使用redis的配置&#xff0c;来达到后续都可动态…

基于51单片机音乐盒LCD1602显示( proteus仿真+程序+原理图+设计报告+讲解视频)

基于51单片机音乐盒LCD1602显示( proteus仿真程序原理图设计报告讲解视频&#xff09; 仿真图proteus7.8及以上 程序编译器&#xff1a;keil 4/keil 5 编程语言&#xff1a;C语言 设计编号&#xff1a;S0065 音乐盒 1. 主要功能&#xff1a;2. 讲解视频&#xff1a;3. 仿真…

阿里云ECS服务器如何搭建并连接FTP,完整步骤

怎么用终端连接服务器就不多说了&#xff0c;直接开始搭建FTP。 我是用root账号执行的命令&#xff0c;如果不使用root账号&#xff0c;注意在命令前面加sudo。 一、安装FTP 我这里安装的是vsftpd。 1、检查是否已安装vsftpd&#xff1a; vsftpd -v如果出现了版本信息&…

(一)pytest自动化测试框架之生成测试报告(mac系统)

前言 我们可以通过pytest-html插件来生成测试报告&#xff0c;但是pytest-html插件生成的测试报告不够美观&#xff0c;逼格也不够高&#xff0c;通过allure生成的测试报告是比较美观的&#xff0c;花里胡哨的&#xff0c;能够提升一个level。 allure官网&#xff1a; Allure…
最新文章