Vue+elementUI开发中报错:Cannot read property ‘resetFields‘ of undefined_elementui chunk 报错-程序员宅基地

技术标签: 前端  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();
},
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yqx_123/article/details/109097570

智能推荐

Android 数据存储---外部存储(SD卡)_你如果复制过数据到/sdcard/android/data,这些数据的用量会显示为“外部存储-程序员宅基地

文章浏览阅读4.1k次,点赞2次,收藏4次。使用外部存储实现数据持久化,这里的外部存储一般就是指的是sdcard。使用sdcard存储的数据,不限制只有本应用访问,任何可以有访问Sdcard权限的应用均可以访问,而Sdcard相对于设备的内部存储空间而言,会大很多,所以一般比较大的数据,均会存放在外部存储中。使用SdCard存储数据的方式与内部存储的方式基本一致,但是有三点需要注意的:需要首先判断是否存在可用的Sdcard,调用Enviro_你如果复制过数据到/sdcard/android/data,这些数据的用量会显示为“外部存储

QT实现鼠标点击鼠标右键创建菜单(带图标)_qt 右键添加menu-程序员宅基地

文章浏览阅读2.2k次,点赞5次,收藏23次。QT实现右键菜单,带图标。_qt 右键添加menu

如何在校外下载期刊全文--应对大家工作后的资料搜寻(转)-程序员宅基地

文章浏览阅读1.8k次。如何在校外下载期刊全文--应对大家工作后的资料搜寻(转) 马上就要工作了,觉得学校里面图书馆资料很多,并且很有用,都可以在中文CNKI数据库,和西文数据库荷兰DOS中全文下载,但是仅仅限于校内IP用户。到了工作单位上,想进入这些数据库查资料就很不容易了。。。并且要收很高昂的费用。。。离开了学校才知道学校里面这么好的电子图书馆的资源当时没有好好利用。 所以在网上找到了在家里和单位都能下载

黑马程序员——网络编程概述和UDP-程序员宅基地

文章浏览阅读107次。----------------- android培训,java培训、期待与您交流! -------------------- 网络编程1.网络编程概述 网络的模型OSI模型,TCP/IP参考模型。网络通讯要素:ip地址,端口号,传输协议。也就是说,我想和某台机器进行网络的通讯,第一,必须知道你要通讯的机器在哪(IP);第二,计算机上有多个应用程序。你想..._udp ufo

C++ Socket网络通信实现一个服务器端和多个客户端的通信_c++ socket通信 一对多-程序员宅基地

文章浏览阅读3.5w次,点赞19次,收藏167次。**浏览更多内容,可访问:http://www.growai.cn一 描述1 采用C++语言2 编译环境是code::blocks3 使用的是非阻塞套接字二 功能描述1 一个服务器对多个客户端2 服务器端主要负责处理数据的输入并发送,具体是通过发送指令向其指定的客户端发送数据,发送接收指令读取其指定的客户端发送的数据3 客户..._c++ socket通信 一对多

使用numpy、颜色映射表 将灰度图变彩图_np gray color-程序员宅基地

文章浏览阅读3k次,点赞7次,收藏15次。目录问题:代码:实例信息:问题:在制作语义分割图像数据集过程中,输出gt可能是表示类别的单通道灰度图,为了可视化,需要使用颜色映射转化为3通道彩色图使用遍历像素的方法将灰度图转彩图较慢,本文使用np.vectorize,可以极大提升转换速度同样数据,遍历方法平均0.45秒,vectorize方法平均0.04秒,提升10倍以上的处理速度代码:# -*- cod..._np gray color

随便推点

配置adb环境变量及查看sharepreference_sharedperference adb操作-程序员宅基地

文章浏览阅读1.6k次。第一步:新建系统环境变量android: 变量值写D:\Android\android-sdk\platform-tools;D:\Android\android-sdk\tools 第二步:配置Path路径 第三部:测试配置成功否 如图所示便是成功配置了adb。查看sharepreference文件:_sharedperference adb操作

文字超出显示省略号的多种方法_文字超出换行-程序员宅基地

文章浏览阅读548次,点赞10次,收藏6次。不换行,超出部分隐藏且以省略号形式出现(部分浏览器支持)2.word-wrap:break-word;只对英文起作用,以单词作为换行依据。只对英文起作用,以字母作为换行依据。只对中文起作用,强制换行。注意:以上换行只对中文生效,如果是英文字母就不会换行需要以下属性。强制不换行,都起作用。_文字超出换行

Linux 命令(文件和目录管理 - cp)_linuxcp命令对/etc/目录进行归档另存,存储位置为/backups/-程序员宅基地

文章浏览阅读3.5k次。cp 命令用来复制文件或目录。当复制多个文件时,目标文件参数必须为已经存在的目录。cp 命令默认不能复制目录,复制目录必须使用 -R 选项。_linuxcp命令对/etc/目录进行归档另存,存储位置为/backups/

PCIe 1. PCI与PCIe学习一——硬件篇_pcie1网卡是在一个gurp下吗-程序员宅基地

文章浏览阅读2.9k次,点赞4次,收藏27次。最近在学习驱动开发过程中涉及到PCI相关知识,在网上看了很多文章,良莠不齐,我总结一下比较好的文章分享给大家,那就从源头开始说起。PCI总线和设备树是X86硬件体系内很重要的组成部分,几乎所有的外围硬件都以这样或那样的形式连接到PCI设备树上。虽然Intel为了方便各种IP的接入而提出IOSF总线,但是其主体接口(primary interface)还依然是PCIe形式。我们下面分成两部分介绍PCI和他的继承者PCIe(PCI express):第一部分是历史沿革和硬件架构;第二部分是软件界面和U_pcie1网卡是在一个gurp下吗

数据结构:字典_字典属于哪种数据结构-程序员宅基地

文章浏览阅读3.2k次。声明:本文为学习数据结构与算法分析(第三版) Clifford A.Shaffer 著的学习笔记,代码有参考该书的示例代码。字典碎碎语:其实我一直对这个数据结构不是很了解。 字典 (Dictionary) 作为数据库的一个简单接口,提供在数据库中存储、查询和删除记录的可能。 字典中有定义关键码 (search key)的概念。而关键码则必须是可比的 字典的ADT如下:template

01-Web客户端与服务器详解_web-server和web-client的区别-程序员宅基地

文章浏览阅读3k次。1、CS与BS   软件使用方式上两种划分    C/S架构   Client/ServerPC客户端、服务器架构   特点:   在服务器当中就主要是一个数据库,把所有的业务逻辑以及界面都交给客户端..._web-server和web-client的区别

推荐文章

热门文章

相关标签