每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行上述代码,可能会出现表单验证的错误提示仍然保留的情况。

element UI 官方文档提供了一个resetFields()的方法

this.$refs[formName].resetFields()

不仅可以帮你初始化数据,还可以将验证提示消除!!!

但是在使用时踩了一些坑,

编辑和新增使用了同一个弹出框<el-dialog><el-form></el-form></el-dialog>
绑定了数据data里的commentForm对象
为了在新增弹出框清空表单, 使用了this.$refs[formName].resetFields()
每次第一次点击新增显示弹出框,都会报错
"[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined""

问题原因: mouted加载table数据以后,隐藏的弹出框并没有编译渲染进dom里面。

所以@click="dialogFormVisible = true;resetForm('dlgForm')"click弹出的时候$refs并没有获取到dom元素导致 'resetFields' of undefined

解决方法:

1、($nextTick dom下一次更新之后)

            resetForm(formName) {
this.$nextTick(()=>{
this.$refs[formName].resetFields();
})
},

2、(如果是第一次就点击新增就没必要reset, 根据元素undefined判断)

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

注意事项:对DOM一系列的js操作最好都要放进Vue.nextTick()的回调函数中

element ui 中的 resetFields() 报错'resetFields' of undefined的更多相关文章

  1. Element UI 中组件this.$message报错

    最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

  2. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

  3. electron-vue中使用iview 报错this. is readonly的解决办法

    title: electron-vue中使用iview 报错this. is readonly的解决办法 toc: false date: 2019-02-12 19:33:28 categories ...

  4. 解决MyEclipse中的js报错的小方法

    今天,下了个模版,但是导进去的时候发现js会报错.看了下其他都没有错误.而有一个js报错误,请原谅我有点红色强迫症,不能留一点红色 . 错误如下:Syntax error on token " ...

  5. 关于Entity Framework中的Attached报错相关解决方案的总结

    关于Entity Framework中的Attached报错的问题,我这里分为以下几种类型,每种类型我都给出相应的解决方案,希望能给大家带来一些的帮助,当然作为读者的您如果觉得有不同的意见或更好的方法 ...

  6. 关于Entity Framework中的Attached报错的完美解决方案终极版

    之前发表过一篇文章题为<关于Entity Framework中的Attached报错的完美解决方案>,那篇文章确实能解决单个实体在进行更新.删除时Attached的报错,注意我这里说的单个 ...

  7. Eclipse中启动tomcat报错:A child container failed during start

    我真的很崩溃,先是workspace崩了,费了好久重建的workspace,然后建立了一个小demo项目,tomcat中启动却报错,挑选其中比较重要的2条信息如下: A child container ...

  8. MyEclipse8.6中提交SVN报错

    上周五(11月27日)的时候,从TortoiseSVN提交项目报错,然后直接从MyEclipse中检出来,修改后提交同样报错. MyEclipse8.6中提交SVN报错,错误提示如下: commit ...

  9. idea中编译项目报错 java: javacTask: 源版本 1.8 需要目标版本 1.8

    问题如上面所叙: > idea中编译项目报错 java: javacTask: 源版本 1.8 需要目标版本 1.8 解决方案: > Setting->Compiler->Ja ...

随机推荐

  1. Git-Bash学习笔记

    二.安装配置 在 Windows 平台上 安装包下载地址:http://msysgit.github.io/ 完成安装之后,就可以使用命令行的 git 工具(已经自带了 ssh 客户端)了,另外还有一 ...

  2. node body-parser

    var express = require('express'); var app = express(); var bodyParser = require('body-parser'); // p ...

  3. C++复习-练习-1

    上周做多媒体技术的作业,JPEG编码问题:FDCT.量化.逆量化和IDCT,只是简单套公式,但还是感觉自己C++好渣...太久没做,手生了,可怕可怕. 所以复习了下文件操作和..基础操作.这里贴一些当 ...

  4. HTML5 服务器推送事件(Server-sent Events)实战开发

    转自:http://www.ibm.com/developerworks/cn/web/1307_chengfu_serversentevent/ http://www.ibm.com/develop ...

  5. 应聘.net开发工程师常见的面试题(一)(转载)

    1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . private : 私有成员, 在类的内部才可以访问. protected : 保护成 ...

  6. aspx文件移动到新建的文件夹中设置路径的问题

    项目中仅仅把aspx移动到想要的文件夹内是会出错的,不用想也知道是路径问题.这里我就说这个路径该如何去修改. 两个地方需要修改:1.母版路径修改方法: <link href="Styl ...

  7. pygame安装

    进入这个网站 http://www.pygame.org/wiki/Compilation 可以选择不同系统的安装方法 其中ubuntu的安装命令是 #这是python .X #install dep ...

  8. 【转】YUV值对应的颜色

    版权声明:本文为博主原创文章,未经博主允许不得转载.欢迎大家积极评论,博主会一一答复! 最近有人在网上问我,YUV的值对应的颜色是如何的 下面给出YUV值对应的颜色关系 256张图512x512,每张 ...

  9. APP测试相关点归纳

    APP测试相关点归纳   1.1测试周期 测试周期可按项目的开发周期来确定测试时间,一般测试时间为一两周,根据项目情况以及版本质量可适当缩短或延长测试时间.正式测试前需确认项目排期. 1.2测试资源 ...

  10. Android开发学习之路--Activity之生命周期

    其实这篇文章应该要在介绍Activity的时候写的,不过那个时候还不怎么熟悉Activity,还是在这里详细介绍下好了.还是参考下官方文档的图吧: 从上面的流程,我们可以看出首先就是打开APP,开始执 ...