文档章节

element ui 中的 resetFields() 报错'resetFields' of undefined

o
 osc_isezqdgg
发布于 2019/09/18 16:10
字数 392
阅读 98
收藏 0

精选30+云产品,助力企业轻松上云!>>>

  每次做各种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()的回调函数中

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Vue报错(element UI):Cannot read property 'resetFields' of undefined

报错信息: 报错代码: 问题描述: Vue + element 开发,一个 Dialog 表单多次使用 ,为了清空 Dialog 表单数据, 使用了 this.$refs[formName].resetFields() 每次第一次点击显示 Dialog,都...

bobobocai
03/31
0
0
vue项目element-ui框架中的弹窗中的表单验证清除问题

问题回顾: 1、vue项目的在弹窗上的form表单验证,第一次点击新增时正常,第二次新增打开弹窗后由于表单内容为空,出现验证这种情况 2、为了解决上面的情况,在执行点击新增事件加上this.$r...

osc_bquv1gtr
2019/04/30
3
0
element-ui组件dialog遇到form

Vue.js似乎成了一种潮流。 UI框架element-ui也跟着成了一种潮流,不过得承认,至少我个人还是非常认可的,element-ui做的是真不错。 用到element-ui,那么在dialog中搭配form就必不可少。 弹...

osc_iprq7rwl
2019/09/18
29
0
(已解决)TypeError: Cannot read property '_t' of undefined

使用vue的ElementUI库,在多语言时报错: TypeError: Cannot read property '_t' of undefined 错误是在点菜单栏时随机抛出的,F12抓不到,只是报错提示。 vue => 2.6.10 element-ui => 2.7.......

osc_7dhd4ad7
04/16
23
0
【Element UI】使用问题记录

【Element UI】使用问题记录 转载:https://www.cnblogs.com/yangchongxing/p/10750994.html 下载地址: https://unpkg.com/browse/element-ui@2.11.1/ https://unpkg.com/element-ui@2.11.......

osc_apxdqf08
2019/04/22
10
0

没有更多内容

加载失败,请刷新页面

加载更多

什么是token及怎样生成token

什么是token   Token是服务端生成的一串字符串,以作客户端进行请求的一个令牌,当第一次登录后,服务器生成一个Token便将此Token返回给客户端,以后客户端只需带上这个Token前来请求数据即...

osc_zzg7fpke
38分钟前
10
0
往事不堪回首

开局一张图,内容全靠编 从12年大学毕业到如今,兜兜转转,依然在码工,码农,码代码的路上徘徊着,从最初的用asp.net写站点,写内部的CRM,内部管理系统,内部的XXX,很难想象内部的系统居然...

osc_9os5791s
39分钟前
15
0
java 事件监听器

package com.qimh.springbootfiledemo.listener;/** * 事件监听器 * 监听person 事件源的eat 和 sleep 的方法 * @author */public interface PersonListener { void doEa...

qimh
39分钟前
15
0
[原创.数据可视化系列之四]跨平台,多格式的等值线和等值面的生成

这些年做项目的时候,碰到等值面基本都是arcgis server来支撑的,通过构建GP服务,一般的都能满足做等值线和等值面的需求。可是突然有一天,我发现如果没有arcgis server 的话,我既然没法生...

osc_bvincwvq
39分钟前
16
0
个人作业——软件工程实践总结&个人技术博客

这个作业属于哪个课程 2020春|S班(福州大学) 这个作业要求在哪里 个人作业——软件工程实践总结&个人技术博客 这个作业的目标 总结软件工程课程以及实践中的收获 作业正文 其他参考文献 一...

osc_9piujk2x
40分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部