脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → el-form使用resetFields重置失效

el-form组件使用resetFields重置失效的问题解决

 更新时间：2023年12月22日 10:57:55   作者：Lucky1311  
用el-form写了包含三个字段的表单,使用resetFields方法进行重置,发现点击重置或要清空校验时是失效的,所以本文给大家介绍了el-form组件使用resetFields重置失效的问题解决,需要的朋友可以参考下

el-form组件使用resetFields重置失效问题解决，有效避坑

1. 问题

用el-form写了包含三个字段的表单，使用resetFields方法进行重置，发现点击重置或要清空校验时是失效的。

在这里插入图片描述

代码：

<template>
  <div>
	<el-form :inline="true" size="mini" style="float: right" :model="queryParams.args" ref="queryForm">
	  <el-form-item label="姓名">
	      <el-input
	          style="width:160px"
	          size="mini"
	          placeholder=""
	          v-model.trim="queryParams.args.name"
	          clearable
	      ></el-input>
	  </el-form-item>
	  <el-form-item label="账号">
	      <el-input
	          style="width:160px"
	          size="mini"
	          placeholder=""
	          v-model.trim="queryParams.args.no"
	          clearable
	      ></el-input>
	  </el-form-item>
	  <el-form-item label="性别">
	      <el-select v-model="queryParams.args.sex" placeholder="请选择" clearable>
	        <el-option
	          v-for="item in options"
	          :key="item.value"
	          :label="item.label"
	          :value="item.value">
	        </el-option>
	      </el-select>
	  </el-form-item>
	  <el-form-item>
	    <el-button type="primary" @click.native="search" size="mini">查询</el-button>
	    <el-button type="primary" @click.native="addUseroperator" size="mini">新增</el-button>
	    <el-button type="success" @click.native="reset" size="mini">重置</el-button>
	  </el-form-item>
	</el-form>
</div>
</template>
<script>
export default {
    data() {
      return {
        queryParams: {
          args:{
            name: "",
            no: "",
            sex: null
          }
        },
        options: [
          {value: 0, label: '女'},
          {value: 1, label: '男'}
        ]
      }
    },
    methods: {
    	reset(){
         this.$refs["queryForm"].resetFields()
      },
}
}
</script>

点击重置按钮后，仍不能清空重置该表单：

在这里插入图片描述

刚开始以为是异步问题，在重置方法代码上加上方法this.$nextTick(()=>{})：

methods: {
    	reset(){
	    	this.$nextTick(()=>{
				this.$refs["queryForm"].resetFields()
	        })
      },
}

测试后仍然没有效果，只能下一步解决：

2. 解决

仔细检查代码后，可以发现el-form-item没有添加prop属性，导致识别不到相应的字段属性，注意这里有个坑：就是el-form这里要加上“:model”字段，我这里是加“:model=“queryParams.args”，如果不加，resetFields也会同样失效。加上后的代码如下：

<template>
  <div>
	<el-form :inline="true" size="mini" style="float: right" :model="queryParams.args" ref="queryForm">
	  <el-form-item label="姓名" prop="name">
	      <el-input
	          style="width:160px"
	          size="mini"
	          placeholder=""
	          v-model.trim="queryParams.args.name"
	          clearable
	      ></el-input>
	  </el-form-item>
	  <el-form-item label="账号" prop="no">
	      <el-input
	          style="width:160px"
	          size="mini"
	          placeholder=""
	          v-model.trim="queryParams.args.no"
	          clearable
	      ></el-input>
	  </el-form-item>
	  <el-form-item label="性别" prop="sex">
	      <el-select v-model="queryParams.args.sex" placeholder="请选择" clearable>
	        <el-option
	          v-for="item in options"
	          :key="item.value"
	          :label="item.label"
	          :value="item.value">
	        </el-option>
	      </el-select>
	  </el-form-item>
	  <el-form-item>
	    <el-button type="primary" @click.native="search" size="mini">查询</el-button>
	    <el-button type="primary" @click.native="addUseroperator" size="mini">新增</el-button>
	    <el-button type="success" @click.native="reset" size="mini">重置</el-button>
	  </el-form-item>
	</el-form>
</div>
</template>
<script>
export default {
    data() {
      return {
        queryParams: {
          args:{
            name: "",
            no: "",
            sex: null
          }
        },
        options: [
          {value: 0, label: '女'},
          {value: 1, label: '男'}
        ]
      }
    },
    methods: {
    	reset(){
         this.$refs["queryForm"].resetFields()
      },
}
}
</script>

在这里插入图片描述

点击重置按钮测试后，确实有效了，问题解决。

在这里插入图片描述

在这里插入图片描述

以上就是el-form组件使用resetFields重置失效的问题解决的详细内容，更多关于el-form使用resetFields重置失效的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • vue中的stylus及stylus-loader版本问题

    vue中的stylus及stylus-loader版本问题

    这篇文章主要介绍了vue中的stylus及stylus-loader版本问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • 深入了解Vue3模板编译原理

    深入了解Vue3模板编译原理

    这篇文章主要介绍了深入了解Vue3模板编译原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • Vue页面骨架屏的实现方法

    Vue页面骨架屏的实现方法

    在开发webapp的时候总是会受到首屏加载时间过长的影响，越来越多的APP采用了“骨架屏”的方式去提升用户体验。这篇文章主要介绍了Vue页面骨架屏的实现方法,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • Vue实现剪切板图片压缩功能

    Vue实现剪切板图片压缩功能

    这篇文章主要介绍了Vue实现剪切板图片压缩功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • vue 限制input只能输入正数的操作

    vue 限制input只能输入正数的操作

    这篇文章主要介绍了vue 限制input只能输入正数的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • VUE+Java实现评论回复功能

    VUE+Java实现评论回复功能

    这篇文章主要为大家详细介绍了VUE+Java实现评论回复功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue3中使用vuedraggable实现拖拽el-tree数据分组功能

    vue3中使用vuedraggable实现拖拽el-tree数据分组功能

    这篇文章主要介绍了vue3中使用vuedraggable实现拖拽el-tree数据分组功能,可以实现单个拖拽、双击添加、按住ctrl键实现多个添加,或者按住shift键实现范围添加,添加到框中的数据,还能拖拽排序,需要的朋友可以参考下
    2024-02-02
  • Vue3+TS项目中eslint、prettier安装配置详细指南

    Vue3+TS项目中eslint、prettier安装配置详细指南

    为了更好的统一项目的代码风格,因此在编写时就可以使用eslint+prettier,它们不仅能方便代码编写,还能避免不必要的错误,让代码变得更加严谨,这篇文章主要给大家介绍了关于Vue3+TS项目中eslint、prettier安装配置的相关资料,需要的朋友可以参考下
    2024-07-07
  • 关于vue-cli 3配置打包优化要点（推荐）

    关于vue-cli 3配置打包优化要点（推荐）

    这篇文章主要介绍了vue-cli 3配置打包优化要点，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue封装Animate.css动画库的使用方式

    vue封装Animate.css动画库的使用方式

    这篇文章主要介绍了vue封装Animate.css动画库的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04

最新评论