Vue+elementUI开发中报错：Cannot read property ‘resetFields‘ of undefined_杨琦鑫的博客-程序员秘密
技术标签： 前端 vue.js javascript
项目场景：
今天在写项目时，想要给添加按钮弹出的模态框添加一个表单验证功能，然后去Element-ui上找到了表单验证的代码，成功的使用了。效果是这样的：
然后我是把添加和修改使用的一个模态框，这时候我发现当我在已有的数据上点修改的时候，弹出的模态框这个校验信息还在，
于是我就去官网看文档找一个清空校验的方法，当我点修改按钮的时候先清除这个表单的校验。然后也成功的达到我想要的效果，但是当我刷新了一下页面再点修改的时候控制台突然报错了：Cannot read property ‘resetFields’ of undefined
问题描述：
先来看一下官方文档的描述：
我的删除按钮代码是这么写的:
<template v-slot:default="slot">
<a href="" @click.prevent="handlertoDelete(slot.row.id)">删除</a>
<a href="" @click.prevent="handlertoEdit(slot.row)">修改</a>
</template>
handlertoEdit(row){
this.title="修改顾客信息"
this.$refs.customerForm.resetFields();
this.customer = row;
this.openModal();
},
原因分析：
经过我浅陋的分析：我觉得应该是这样的，如果我先点击添加按钮，才会有表单校验，然后在点击修改时候才可以清除；如果我刷新页面后先点击删除按钮，就没有可以清除的校验，所以会报错：Cannot read property ‘resetFields’ of undefined
解决方案：
所以在清除校验之前先进行判断就可以了，
代码如下：
handlertoEdit(row){
this.title="修改顾客信息"
if (this.$refs.customerForm !== undefined) {
this.$refs.customerForm.resetFields();
}
// this.$refs.customerForm.resetFields();
this.customer = row;
this.openModal();
},
智能推荐
RabbitMQ消息队列_rabbitmq 消费排队_pumpkin9841的博客-程序员秘密
1 MQ的相关概念1.1 什么是MQMQ(message queue)，从字面意思上看，本质是个队列，FIFO 先入先出，只不过队列中存放的内容是message 而已，还是一种跨进程的通信机制，用于上下游传递消息。在互联网架构中，MQ 是一种非常常见的上下游“逻辑解耦+物理解耦”的消息通信服务。使用了 MQ 之后，消息发送上游只需要依赖 MQ，不用依赖其他服务。1.2 为什么要用MQ1 流量削峰举个例子，如果订单系统最多能处理一万次订单，这个处理能力应付正常时段的下单时绰绰有余，正常时段我们下单一
QT界面切换特效_qt界面切换效果_F_hawk189的博客-程序员秘密
应用场景 淡入淡出 界面平移 回弹效果 转载自：hezf_hero：https://blog.csdn.net/hezf_hero/article/details/50187483应用场景在开发桌面应用的时候，经常性的会在几个界面之间切换可以是局部的，也可以是整个界面以前我总是利用hide和show来完成但是很缺乏动态的美感，用户在使用的时候体验不好今天就来解决这个问...
iOS开发UI篇—CAlayer层的属性_泥孩儿0107的博客-程序员秘密
iOS开发UI篇—CAlayer层的属性
POJ-1141 Brackets Sequence（递推）_J_Sure的博客-程序员秘密
Brackets SequenceTime Limit: 1000MS Memory Limit: 65536K Special JudgeDescriptionLet us define a regular brackets sequence in the following way: 1. Emp
RabbitMq docker+haproxy+keepalived高可用的负载均衡集群_cannot open configuration file/directory /usr/loca_Leone_的博客-程序员秘密
创建3个mq运行容器docker run -d --hostname rabbit1 --name myrabbit1 --log-opt max-size=10m --log-opt max-file=3 -v /docker/rabbitmq/myrabbit1:/var/lib/rabbitmq -p 15672:15672 -p 5672:5672 -e RABBITMQ_ERLANG_...
mybatis和mybatis-plus同时存在项目中，出现 Invalid bound statement (not found) 异常_Notail^0^的博客-程序员秘密
官方的解决方案出现Invalid bound statement (not found)异常不要怀疑，正视自己，这个异常肯定是你插入的姿势不对…… 检查是不是引入 jar 冲突 检查 Mapper.java 的扫描路径 方法一：在Configuration类上使用注解MapperScan @[email protected]("com.yourpackage.*.mapper")public class YourConfigClass{ ....
随便推点
《从零开始学Swift》学习笔记（Day 59）——代码排版_swift 59_一度_iOSDeveloper的博客-程序员秘密
代码排版包括: 空行、空格、断行和缩进等内容。代码排版内容比较多工作量很多，但是非常重要。空行空行将逻辑相关的代码段分隔开，以提高可读性。下列情况应该总是添加空行： 类型声明之前。 import语句前后。 两个方法或函数之间。 块注释或单行注释之前。 方法或函数内的两个逻辑段之间，用以提高可读性。 一个源文件的两个片段之间。空格在代码中有些位
python -- PyQt5（designer）安装详细教程_python安装pyqt5_M_Q_T的博客-程序员秘密
PyQt5安装详细教程，安装步骤很详细
【STM32】以太网DMA描述符_RiverFormSky的博客-程序员秘密
说明：整篇文章讲了STM32的以太网驱动是如何工作的，重点记录了我学习的时候的一些疑惑，未经同意请勿转载，谢谢！1、什么是以太网DMA？学过STM32的同学都应该知道DMA就是不需要CPU的参与就能够实现内存和外设之间的数据交换，同样的，对于STM32互联型单片机的以太网DMA的作用也是如此，它的作用就是在不需要CPU的参与下，实现内存和以太网外设的数据交换。用通俗一点的话来表述，就是我们将...
对象的序列化&反序列化流，ObjectInputStream，ObjectOutputStream_objectinputstream反序列时出现无效流怎么解决_未名湖畔种千玺的博客-程序员秘密
黑马程序员序列化对象序列化流–ObjectOutputStream案例package ObjectStream;import java.io.FileOutputStream;import java.io.IOException;public class ObjectOutputStream { public static void main(String[] args) throws IOException { java.io.ObjectOutp
STL系列_Alexander_1314的博客-程序员秘密
&nbsp;STL系列之一 deque双向队列分类： STL 他山之石 2011-11-08 09:52 7949人阅读 评论(8)收藏 举报deque双向队列是一种双向开口的连续线性空间，可以高效的在头尾两端插入和删除元素，deque在接口上和vector非常相...
jsp通过类的定义求出圆的周长与面积_jsp求圆的周长和面积_爱睡觉的小馨的博客-程序员秘密
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><%! p