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

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

 更新时间：2022年05月27日 10:09:30   作者：长成一棵参天树  
这篇文章主要介绍了vue form表单使用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变量要一一对应

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

您可能感兴趣的文章:

相关文章

  • 浅谈VueUse中useAsyncState的实现原理

    浅谈VueUse中useAsyncState的实现原理

    useAsyncState 是 VueUse 库中提供的一个实用工具,它用于处理异步状态,本文主要介绍了VueUse中useAsyncState的实现及其原理,具有一定的参考价值,感兴趣的可以了解一下
    2024-08-08
  • vue + element-ui实现简洁的导入导出功能

    vue + element-ui实现简洁的导入导出功能

    Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI，下面这篇文章主要给大家介绍了关于利用vue + element-ui如何实现简洁的导入导出功能的相关资料，需要的朋友可以参考下。
    2017-12-12
  • 详解Vue项目部署遇到的问题及解决方案

    详解Vue项目部署遇到的问题及解决方案

    这篇文章主要介绍了详解Vue项目部署遇到的问题及解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • React DOM diff 对比Vue DOM diff 区别详解

    React DOM diff 对比Vue DOM diff 

    这篇文章主要为大家介绍了React DOM diff 对比Vue DOM diff 区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • 详解Vue 开发模式下跨域问题

    详解Vue 开发模式下跨域问题

    本篇文章主要介绍了Vue 开发模式下跨域问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 解决vuex刷新数据消失问题

    解决vuex刷新数据消失问题

    这篇文章主要介绍了解决vuex刷新数据消失问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vant IndexBar实现的城市列表的示例代码

    vant IndexBar实现的城市列表的示例代码

    这篇文章主要介绍了vant IndexBar实现的城市列表的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Vue之TodoList案例详解

    Vue之TodoList案例详解

    这篇文章主要为大家介绍了Vue之TodoList的案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助<BR>
    2021-11-11
  • Vue最新防抖方案(必看篇)

    Vue最新防抖方案(必看篇)

    今天小编就为大家分享一篇Vue最新防抖方案(必看篇)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue-cli Eslint在vscode里代码自动格式化的方法

    Vue-cli Eslint在vscode里代码自动格式化的方法

    本篇文章主要介绍了Vue-cli Eslint在vscode里代码自动格式化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02

最新评论