vue form表单使用resetFields函数出现的问题

目录
  • form表单使用resetFields函数的问题
  • resetFields失效,死活不起作用的解决
    • 分析
    • 解决办法

form表单使用resetFields函数的问题

今天想使用新增和删除使用一个dialog，这就涉及到点击添加按钮需要清空表单数据的问题，我第一个想到的是调用resetFields方法。

我直接写了之后是这样的

this.$refs[formName].resetFields()

结果直接报错，于是我就上网上百度了后，发现改成这样就不报错了。

 this.$nextTick(function() {
   const el: any = this.$refs[formName];
   el.resetFields();
});

于是心想肯定可以了，结果点击界面还是没反应，最后去官网看了下，发现我没有在表单的el-form-item写prop属性。

最后加上后，在点击添加按钮时候调用reset方法就可以了 。

但是在使用的时候要先设置打开model的变量为true之后再调用，因为只有设置为true后才能找到对应的dom元素。 而且还是要使用nextTick的

resetFields失效,死活不起作用的解决

由于新增、编辑、查看弹框表单用的同一个表单，但打开编辑或查看表单并关闭后，再打开新增表单，发现表单有之前的数据，resetFields失效。

分析

后查看官方文档，发现，resetFields只是对整个表单进行重置，将所有字段重置为初始值并移除校验结果，当打开编辑表单后，表单字段初始值就为编辑获取到的值，此时resetFields就是将表单字段重置为初始值，就是编辑表单获取到的值；

解决办法

eg：

vue
<el-dialog @close=“handleClose(‘userForm')”>
<el-input v-model="userForm.name>
…

…
表单 userForm = {
name: “”,
age: “”,
}

关闭弹框方法里写：

handleClose(formName) {
let resetForm = {
name: “”,
age: “”,
}
this[formName] = resetForm;//清空表单
this.$refs[formName]
.resetFields();//移除校验结果
。。。。再写关闭弹框等其他方法。。。
}

PS：表单中prop与v-model变量要一一对应

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈vue中resetFields()使用注意事项

    this.$refs.frmAdd.resetFields();这句在使用中有些时候不会有啥问题,但有时候就会出问题,而且特别难缠,我原来这么使用就没问题啊,怎么这里就会有问题,查找各种资料总结得出: 第一种情况:放在弹框刚准备弹出的时候 第二种情况:放在弹框关闭方法@close中 发现上次报红框的地方仍然在,并未重置 最终解决方案: this.KaTeX parse error: Expected '}', got 'EOF' at end of input: - this.refs.frmA

  • 快速解决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表单resetFields无法重置问题

    目录 问题背景 第一个无法解决重置表单解决方案 第二个无法解决重置表单解决方案 问题背景 在开发中自己使用this.$refs[formName].resetFields()出现无法重置表单的的场景有两种: 1.<Modal/ >组件内表单填写,在 modal 组件未挂载在 DOM 元素中,就无法获取到 form 表单组件的实例,所以this.$refs[formName]获取实例就会出现 undefined 的情况. 2.比如编辑表格数据,需要回显表单数据,我们一般的做法就是放表单的 raw

  • vue form表单使用resetFields函数出现的问题

    vue form表单使用resetFields函数出现的问题

    目录 form表单使用resetFields函数的问题 resetFields失效,死活不起作用的解决 分析 解决办法 form表单使用resetFields函数的问题 今天想使用新增和删除使用一个dialog,这就涉及到点击添加按钮需要清空表单数据的问题,我第一个想到的是调用resetFields方法. 我直接写了之后是这样的 this.$refs[formName].resetFields() 结果直接报错,于是我就上网上百度了后,发现改成这样就不报错了. this.$nextTick(fu

  • vue form 表单提交后刷新页面的方法

    最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中 定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数据 this.$http.get("/permit/specific", { params: { page: this.localPage, size: this.msg.pagNumber, } }, {emulateJSON: true} ).then((response) =>

  • Vue form 表单提交+ajax异步请求+分页效果

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-

  • Vue form表单动态添加组件实战案例

    今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景,就是在form中我们需要动态的增加组件模块,效果如下: 这种效果实现其实就是对 v-for 指令的一种使用,组件不是必须的,只是为了将这部门的代码我们单独的拎出来,便于查看,好了,话不多说,我们来看下具体怎么来实现. 案例效果的实现 1.创建组件 首先我们创建一个单独的组件,同时在 template 中定义我们的表单元素,此处使用的是 element UI 来实现效果. 2.import组件 我们需要在父组件中引入创建的组件,并通

  • vue form表单post请求结合Servlet实现文件上传功能

    vue form表单post请求结合Servlet实现文件上传功能

    前端测试页面代码: <template> <div> <input type="file" name="file" @change="change($event)"> </div> </template> <script> export default { created(){ this.path = this.$route.query; for (let i in this

  • 使用Vue动态生成form表单的实例代码

    具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流:github地址 示例 https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg 安装 npm install form-create OR git clone https://github.com/xa

  • vue+elementui(对话框中form表单的reset问题)

    目录 对话框中form表单的reset问题 解决原理 解决办法 element UI form表单重置无效 实例化是 说下解决 对话框中form表单的reset问题 一般在新增和编辑的时候用的都是同一个对话框和form表单,而在先点击编辑的时候form表单的resetfileds函数就会失效 解决原理 实际上结构是(通过vue类比) data里面有一个form表单的初始值, methods里面定义了一个resetfileds的函数 resetfileds函数的作用:记录在mounted生命周期执

  • Drupal7 form表单二次开发要点与实例

    请记得收藏此文,在你进行Drupal 7 custom module时,经常会用到的form 表单的跳转或重载. 主要汇总三个要点: 1.页面提交后,经过#submit处理后,需要redirect 跳转到另外一个页面.2.url路径中存在destination参数时,页面直接跳转到destination所指的url,无法控制的问题.3.form表单如何实现multiple steps forms 多个步骤,或者表单提交后,如何在表单获取到提交上来的值. 一.Form 表单 redirect(跳转

  • 原生js实现form表单序列化的方法

    当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序列化方法: 先介绍一下jquery中有相应的表单序列化的方法: 1.serialize()方法 格式:var data = $("form").serialize(); 功能:将表单内容序列化成一个字符串. 这样在ajax提交表单数据时,就不用一一列举出每一个参数.只需将data参数设置为

随机推荐