问题回顾:

1、vue项目的在弹窗上的form表单验证,第一次点击新增时正常,第二次新增打开弹窗后由于表单内容为空,出现验证这种情况

2、为了解决上面的情况,在执行点击新增事件加上this.$refs[formName].resetFields()或者this.$refs[formName].clearValidate();

3、刷新界面后第一次点击新增出现这样"Cannot read property 'resetFields' of undefined"或者"Cannot read property 'clearValidate' of undefined",

  第二次点击新增没有报错没有新增,说明第二次没有报错。

问题分析:刷新界面后第一次新增,此时表单内的dom还没有加载完成就执行了"Cannot read property 'resetFields' of undefined"或者"Cannot read property 'clearValidate' of undefined",

  这样就导致报错。

修改意见

//打开弹窗的新增函数
addStaff() {
this.staffVisible = true;//弹窗打开
this.$nextTick(()=>{
this.$refs.staffForm.resetFields();//等弹窗里的form表单的dom渲染完在执行this.$refs.staffForm.resetFields(),去除验证
});
},

  

vue项目element-ui框架中的弹窗中的表单验证清除问题的更多相关文章

  1. iview中Modal弹窗做form表单验证相关问题

    在modal中初始化状态,点击确定弹窗消失. 有的时候表单验证就不希望立刻消失 在iview官网中有自定义页头页脚 可以直接自定义使用 另一种验证写法 serform: { ctCatelogue: ...

  2. 由表单验证说起,关于在C#中尝试链式编程的实践

    在web开发中必不可少的会遇到表单验证的问题,为避免数据在写入到数据库时出现异常,一般比较安全的做法是前端会先做一次验证,通过后把数据提交到后端再验证一次,因为仅仅靠前端验证是不安全的,有太多的htt ...

  3. Element表单验证(1)

    Element表单验证(1) 首先要掌握Element官方那几个表单验证的例子,然后才看下面的教程. Element主要使用了async-validator这个库作为表单验证 async-valida ...

  4. ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  5. Element UI 框架搭建

    Element UI 框架搭建 1.webpack 全局安装 npm install -g webpack 2.淘宝镜像cnpm安装 npm install -g cnpm --registry=ht ...

  6. ASP.NET MVC搭建项目后台UI框架—1、后台主框架

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  7. ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...

  8. ASP.NET MVC搭建项目后台UI框架—2、菜单特效

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  9. ASP.NET MVC搭建项目后台UI框架—3、面板折叠和展开

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

随机推荐

  1. jQuary总结3: jQuery语法1

    1.jQuery样式操作 1.1 设置或者修改样式,操作的是style属性. 单样式语法: jQuery对象.css('属性名', '属性值') //html <div id="box ...

  2. C/C++语言中指针数组和数组指针比较区别

    指针数组:int *p[3] 定义一个指针数组,其中每个数组元素指向一个int型变量的地址 意思就是指针的数组,数组里面都是指针 例子: int *p[3];//定义了一个指针数组,有3个成员,每个成 ...

  3. URAL 1698. Square Country 5(记忆化搜索)

    题目链接 题意 : 自守数的定义:如果某个数的平方的末尾几位数等于这个数,那么就称这个数为自守数.例如5*5=25,则5就是自守数.让你求不超过n位的自守数有多少 思路 : 实际上,自守数还有两个性质 ...

  4. Spring实战-README.md

    教程 <Spring实战>(第四版),[美]Craig Walls著,张卫滨译 人民邮电出版社,2016.4 本系列博文包括: 第01章-Spring之旅 第02章-装配Bean 第03章 ...

  5. Materialize——扁平化卡片式网页模板

    Materialize 官网:http://www.materialscss.com/ 下载 http://pan.baidu.com/s/1kUUX2Vt CSS 颜色 背景色 <div cl ...

  6. MFC 错误异常,用vs添加资源并为资源定义类后报错:error C2065 : 未声明的标识符

    添加了一个Dialog资源,修改了ID之后右击资源添加了一个类,在类里面有一个成员变量: // 对话框数据    enum { IDD = IDD_GETIN }; 而在编译过程中出现报错,错误代号是 ...

  7. 20145218张晓涵_Web基础

    20145218张晓涵_Web基础 基础知识 Apache一个开放源码的网页服务器,可以在大多数计算机操作系统中运行,由于其多平台和安全性被广泛使用,是最流行的Web服务器端软件之一.它快速.可靠并且 ...

  8. [linux] ubuntu 切换默认的/bin/sh

    [linux] ubuntu 切换默认的/bin/sh 背景 ubuntu 默认的sh, 也就是/bin/sh默认被切换成了dash,dash体积相对于bash更小,并且性能相对于bash更好, 但是 ...

  9. word2010多级列表编号为什么会变成黑块

    把光标放置在黑块的后面 在键盘上按左方向键,则黑块变灰色(为选中状态) 然后ctrl+shift+s, 出现窗口“apply styles" 点击"reapply", 搞 ...

  10. 转载C#中Trim()、TrimStart()、TrimEnd()的用法

    C#中Trim().TrimStart().TrimEnd()的用法:    这三个方法用于删除字符串头尾出现的某些字符.Trim()删除字符串头部及尾部出现的空格,删除的过程为从外到内,直到碰到一个 ...