快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

问题：

使用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 label="活动名称" prop="name">
  <el-input v-model="sizeForm.name"></el-input>
 </el-form-item>
</el-form>

3.还有一个经常出现这种问题的场景是，当使用vuex的时候，新建表单与编辑表单复用，此时上述属性跟方法都添加了也无法达到清除表单的效果。

此时我们再重新看一下element-ui的官方文档

方法名 说明
resetField 对该表单项进行重置，将其值重置为初始值并移除校验结果
clearValidate 移除该表单项的校验结果

重点：resetField()方法不是将表单重置为空，而是重置为初始值

所以当我们打开新建表单的时候，表单项绑定的属性值为空，在提交表单后，表单项绑定的值不为空，此时再打开新建表单是会有上一次的值出现，此时resetField()方法是无法清空表单的，因为在这次操作的时候，属性初始值就不为空。

解决方法：

在提交表单成功后对绑定的值进行方法重置

//  重置表单项属性
resetForm () {
  return {
    remark: '',
    name: ''
  }
}

//  提交表单成功后重新给属性赋值
submit () {
  //......调用成功
  let self = this
  let query = self.resetForm()
  self.updateForm({ //此方法是自定义的vuex的action方法，大家可根据实际应用场景定义重置表单方法
    form: query
  )}
  self.$ref['form'].resetFields()  // 此时再调用resetFields()方法是为了清除表单验证而出现的错误
}

在对属性进行重置后执行resetFields方法，是因为对属性重置为空时，可能会触发表单规则的验证，此时执行resetFields会移除校验结果

补充知识：vue+element-ui this.$refs[‘‘].resetFields() 重置表单数据不生效问题

element 的 Form 组件提供了表单验证的功能，需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名。

有两点需要注意：

1.要有对应的 ref，且名字一致，表明重置哪个表单。

2.prop 设置的字段名要和 v-model 绑定的字段名一致，否则重置表单或进行自定义校验规则时不会生效。

仅使用重置功能时具体校验规则不必填，但要重置的字段一定要有对应的 prop。

以上这篇快速解决Vue、element-ui的resetFields()方法重置表单无效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue+ElementUI 中级联选择器Bug问题的解决

    最近在项目中需要用到级联这么个控件,所以便去element上找了个,发现了个问题,在这里跟大家分享下,介于公司项目的隐私性,所以一些文字便给大家打上马赛克了,敬请谅解~ 不多说废话,直接上问题: ElemenUI的级联是通过子级字段递归进行显示的,但是假如后端老铁也用了递归写的数据,而递归到最后一个数据集便出现了问题,会出现光有字段,但是却没有数据这么个情况在这里插入图片描述 这时候就出现了问题: 最后一级会多出来一个级联,这种体验便造成了很不好的感觉. 解决办法: 将获取这些级联的数据作为参数

  • vue+ElementUI 关闭对话框清空验证,清除form表单的操作

    前面跟大家提到过 elementUI验证的问题,那么今天就来看看 点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示 1.首先在你的对话框 取消按钮 加一个click事件,例如:(ps::callOf里面的addGroupData和ref一 一对应起来) <div slot="footer" class="dialog-footer"> <el-button @click="callOf('addGr

  • 详解element-ui中表单验证的三种方式

    最近项目中一直使用的element-ui作为前端框架,对于最常使用的表单验证,做出以下总结: 第一种常用方式:表单上加rules{object} <el-form class="apply-form first-form" :model="formData" :rules="rule" ref="form"> <el-form-item label="姓名" prop="visi

  • vue表单验证你真的会了吗？vue表单验证（form）validate

    前言 很久没有写文章了,学习了一下webpack,基础的一些组件,今天带来form表单验证组件(element.iviewui)的一期教程(作为一个菜鸡毕竟经历众多项目可以给一些新手一点提示 (QQ群技术讨论)838293023备注(github进来的 github 技术文档技术文档会持续更新 效果图 1.原理解释 考虑 我们看一下我们可以用form去整体触发校验也可以单个input来触发form-item 进行校验 童鞋们现在可能感觉还是没懂,没关系继续往下看. 2.派发和广播 为什么要用广播

  • 快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

    问题: 使用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&qu

  • 解决Vue+Element ui开发中碰到的IE问题

    IE9样式错乱,IE11无法正常加载v-loading等问题 引入了babel-polyfill插件,依然出现"polyfill-eventsource added missing EventSource to window"的奇怪问题(ie所有版本都有出现) 第一步:安装babel-ployfill (已安装请跳过此步骤) yarn add babel-ployfill 修改webpack打包配置文件:webpack.bash.conf.js // 引入babel-ployfill

  • 解决vue+ element ui 表单验证有值但验证失败问题

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item label="数据模板" prop="template" > <el-col :span="20"> <el-input type="textarea" v-model="form.template

  • 快速解决vue动态绑定多个class的官方实例语法无效的问题

    首先,直接进入正题,我想要给一个dom绑定多个class,而且是动态绑定,这个时候可以用v-bind简写可以写为" :"冒号,我查了官方的语法, 具体如下: <!-- class 绑定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[cl

  • vue element动态渲染、移除表单并添加验证的实现

    又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内容的表单 例如: "工作经历"可以用户自己点击继续添加按钮,在原有的表单后面 append 多一个表单,不需要就点击右上方 X 按钮移除 问题 在实现之前,提出几个问题 vue 怎么动态渲染或移除表单上去 v-model 怎么绑定动态添加表单的 value 值 动态新增的表单如何验证 动态表单怎么填写对应的 prop ... 好吧,我当时也

  • vue element ui validate 主动触发错误提示操作

    elementUI使用了async-validator进行表单验证,但是当我使用下拉树(el-cascader)时,发现其不主动触发,于是我只能主动去触发,方法如下: this.$refs['form'].fields[0].validateMessage = 'error message' this.$refs['form'].fields[0].validateState = 'error' 补充知识:element-ui 打开页面触发校验问题 如果你设置了关闭弹出页就resetFields

  • 在vue+element ui框架里实现lodash的debounce防抖

    事情起因在:我使用element ui框架里的远程搜索框,在单选时,组件内部已经做了防抖,query是在一段时间内的字符串.但是在多选时,并没有做防抖,而是每输入一个字符都要向后台发一次请求,所以必须防抖,官方推荐使用lodash的debounce 在解决这个问题时,我遇到的坎儿主要有以下: 我首先在项目里用npm安装lodash,先全局安装,然后安装到项目 npm install -g lodash npm install --save lodash 安装后,我就在我要用防抖的组件里,引入lo

  • 总结Vue Element UI使用中遇到的问题

    总结Vue Element UI使用中遇到的问题

    基于 vue2.0 的 element-ui 框架,使用起来还是很方便的,非常适合快速开发,但是在做自己的项目中还是会碰到这样那样的问题,有些问题官方文档并不是很详尽,以下是我在使用 element-ui 过程中一些常用的或碰到的一些问题笔记. 一.DateTimePicker 日期选择范围为当前时间以及当前时间之前 <template> <div> <el-date-picker size="small" clearable :picker-option

  • 使用vue+element ui实现走马灯切换预览表格数据

    使用vue+element ui实现走马灯切换预览表格数据

    目录 1. 需求分析 2. 效果演示 3. 代码实现 3.1 table.json 3.2 HTML 代码 3.3 Script 代码 总结 1. 需求分析 有这样一个 json 文件(table.json),里面包含有多组需要展示的表格数据,需求就是需要将这些数据进行展示,并且能快速查看不同的数据,由于数据过多,不能一个表格一个表格的进行展示,所以找了一个比较合适的方法,就是通过走马灯将所有数据进行渲染,当切换走马灯时,再展示对应的数据. 2. 效果演示 3. 代码实现 3.1 table.j

  • 快速解决vue.js 模板和jinja 模板冲突的问题

    jinjia和vue.js默认的模板转义符都是{{}} 目前的解决办法是修改vue.js的转义符,将原来的{{}}替换为其他标签,我改为{[]} 版本1.x和2.x方法如下 // 1.x Vue.config.delimiters = ['{[', ']}'] // 2.x new Vue({ delimiters: ['{[', ']}'] }) 以上这篇快速解决vue.js 模板和jinja 模板冲突的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

随机推荐