如何解决element ui 表单resetFields 的indexOf报错

最新推荐文章于 2023-09-04 10:07:18 发布
最新推荐文章于 2023-09-04 10:07:18 发布
阅读量670 收藏
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a4565yuuuyu/article/details/126141871
版权

 

如图每个div包裹一个表单 每个表单都有清空表单的resetFields方法 

第一个表单清空不报错 第二个及其他都报错了。

我们可以点击

 去看看

由此可以知道这个方法的原理。

我们再去打印一下this.$refs 

 对比一下fields每一个实例

我发现最后一个实例中他是一个按钮 所哟无法清空！

 由此想到 是受到上一个表单影响，因此解决方式我是这么做的！

 

 

集集fxy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element UI表单设计及代码生成器
03-31
Element UI表单设计及代码生成器是一个非常实用的工具，专为基于Vue.js框架和Element UI库的开发者设计。这个工具极大地简化了开发过程中的表单创建任务，它允许用户通过直观的图形界面来设计表单，然后自动生成相应...
在使用resetField报错Cannot read property 'indexOf' of undefined
qq_29055201的博客
04-22 4310
elementUI 的resetField是对整个表单进行重置，将甩有字段值重置为初始值并移除校验结果，当内容不一致，或者找不到内容时，就会报错，具体原因举例如下： 原因： 当表单有v-if根据表单内部数据去控制是否显示时，会存在这个问题 <el-form ref="form" :model="form" :rules="addLabelValidator"> <el-f...
element 表单 resetFields（）方法报错Cannot read properties of undefined (reading ‘indexOf‘)
LewisRoc的博客
12-24 3818
项目中有个详情页点进去之后页面一直在加载报了这个错，看了提示是跟element 表单清空有关 项目中在初次进入页面调用了 this.$refs['ruleForm'].resetFields(); 这个方法，跟着检查了一遍页面中的表单项发现有一个表单项只是为了显示label名称占位没有绑定prop值，如下 <el-form-item label="附件"> 推测是这里出的问题，那么我就把这个el-form-item给删了用了一个div替换并加上了样式结果就没有问题了。 因为是刚来接收别人留.
element-ui 表单清空 resetField()方法报错Cannot read property ‘indexOf‘ of undefined
weixin_39277183的博客
07-28 3912
在使用resetField 报错Cannot read property 'indexOf' of undefined element-ui 表单清空 resetField()方法在项目应用的时候，报错具体代码如下（真实开发场景） 这样很明显报错了，应该是数据挂载顺序得问题导致。 尝试修改（失败） 然后试了我就把v-if改为了v-show，好像是可以实现关闭弹窗，但是我点击保存form表单数据的校验还是会走我隐藏掉的那一模块进行数据校验，所以果断放弃。 尝试修改（成功...
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
总之，解决Vue和Element-UI的`resetFields()`方法重置表单无效问题，关键在于正确设置`ref`和`prop`属性，并在适当的时候对表单数据进行重置和清除验证结果。理解`resetFields()`方法的机制，以及如何在Vuex环境中...
解决vue+ element ui 表单验证有值但验证失败问题
10-15
主要介绍了vue+ element ui 表单验证有值但验证失败，本文通过实例代码给大家分享解决方案，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
基于Vue的Element UI表单设计及代码生成器设计源码
最新发布
04-09
该系统旨在提供一个便捷的Element UI表单设计及代码生成解决方案，使用户能够快速地设计和生成表单代码。系统采用Vue作为前端框架，同时融合了HTML、CSS和JavaScript等技术，构建了一个稳定、易用的表单设计工具。
el-form 使用 resetField ，TypeError: Cannot read properties of undefined (reading ‘indexOf
lagego的博客
06-29 512
必须保证每个el-form-item 设置prop，不允许为空，否则汇报以上TypeError: Cannot read properties of undefined (reading 'indexOf'） 错误。
Vue、element-ui的resetFields()方法重置表单无效问题及解决办法
JEECG官方博客
03-15 2606
问题： 使用this.$ref[‘form‘] .resetFields()无法重置表单项 原因： 1.没有给表单添加ref属性 <el-form ref="form"></el-form> 2.表单项el-form-item没有添加prop属性，prop属性需要与input框绑定的属性一致 <el-form ref="form" :model="sizeForm" label-width="80px" size="mini"> <el-form-item lab
elementui resetFields方法重置表单失败
johnhuster的专栏
04-29 3815
<el-form :inline="true" :model="form" ref="form1" class="form-inline"> <el-form-item label="工号：" prop="jobNumber"> <el-input...
elemetui-vue表单校验报错“TypeError Cannot read properties of undefined (reading ‘indexOf‘)
qq_46490956的博客
09-04 416
然后百度了一下，看到了大佬的代码解释，是因为表单里面有<el-form-item>上面用了v-if所以导致两个表单切换清空校验时出现了问题；解决方法：用div包裹有v-if的<el-form-item>并且把v-if写道div上；看代码发现就是这段代码报错，通过注释排除发现就是在清空校验时报错，环境：vue2+elementui。
element-ui 表单重置 resetFields 方法不起作用的解决方法
weixin_43299180的博客
03-19 5352
问题描述： 经常有新增和编辑需要复用同一个弹窗的情况；刷新一下页面，先点开编辑关闭弹窗后再点击新增，这个时候再弹窗关闭的时候重置表单方法没有效果： this.$refs.form.resetFields(); resetFields作用： 1、对整个表单进行重置，字段重置为初始值 2、移除校验结果 问题分析结果： 1、resetFields 重置的是初始值 2、form 的初始值在 mounted 生命周期执行的时候被调用 3、如果在 mounted 生命周期执行之前修改了初始值，那么resetFi
表单报错：Cannot read properties of undefined (reading ‘indexOf‘)....
程序媛的博客
03-09 1156
表单报错：TypeError: Cannot read properties of undefined (reading 'indexOf') at VueComponent.resetField
element表单方法resetFields()报错
java开发者专栏
05-10 2077
element表单方法重置报错
Vue element 表单提交报错 Cannot read property 'indexOf' of undefined
weixin_43880497的博客
12-23 2809
Vue element 表单提交报错 Cannot read property ‘indexOf’ of undefined 如果表单中有的item用到了校验,应该每一项都加上prop 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你...
ElemetUI重置新增或修改时报错解决办法
1
11-16 178
重置的时候调用 this.$refs[“form”].resetFields();报错,这时候data数据还没渲染进dom导致。这里还要判断一下第一次弹出时不用执行重置方法。nextTick()回调中。
使用elementUI组件实现表格的分页以及搜索功能
m0_69983788的博客
08-09 9988
使用elementUI组件实现表格的分页以及搜索功能，主要的UI组件：el-input、el-table、el-pagination
element ui 表单校验没有*西安市
12-20
element-ui表单校验没有*西安市的方法。但是，根据提供的引用内容，可以看出element-ui在不同版本中的校验规则有所不同。 在element-ui版本1.X中，校验规则为： ```javascript { required: true, message: '必填', trigger: 'change|blur' } ``` 在element-ui版本2.X中，校验规则为： ```javascript { required: true, message: '必填', trigger: 'change' } ``` 根据提供的引用内容，无法确定具体的校验规则是否包含*西安市。如果你想要实现校验规则包含*西安市，你可以自定义校验规则来实现。以下是一个示例代码： ```javascript { validator: (rule, value, callback) => { if (value.indexOf('西安市') !== -1) { callback(new Error('不能包含*西安市')); } else { callback(); } }, trigger: 'change' } ``` 这个示例代码会在输入的值中检查是否包含*西安市，如果包含则会返回一个错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值