vue清空form对象的方法

更新时间：2022年09月08日 17:18:37 作者：xielatian

这篇文章主要介绍了vue清空form对象的方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue清空form对象

const form ={
    name:'aaa',
    age:18
}

vue 刷新全局数据，回归到初始化状态

Object.assign(this.$data, this.$options.data())

清空具体的form

this.form = this.$options.data().form

清空对象vule值，保留key

Object.keys(form).forEach((key) => (form[key] = ''))

使用组件ref清空

this.$refs['form'].resetFields()

暴力清空，不保留属性

form ={}

储备式赋值

首先把form在页面暂存

this.oldForm = JSON.parse(JSON.stringify(form))

做完处理操作后，再复制原始form对象

this.form = JSON.parse(JSON.stringify(oldForm ))

vue el-form 表单清空初始化

如果用手写属性值=undefined 会带来副作用影响，比如下次打开，这个属性没了，然后页面无法写入，或是选择项出现validate校验error ，这并不是我们想要的效果，推荐使用官方已经定义好的

resetFields

它需要具备三个条件，才能成功初始化。

1.el-form 里加上 ref='form'

2.表单项加上 prop="name"

3.this.$refs['form'].resetFields() // 清空表单

vue清空form表单数据踩坑

关闭弹出框时，想要清空里面的form表单数据

this.$refs['form'].resetFields()

但是再次点开时发现只清空了一部分，检查后发现在写form-item时漏掉了prop，如下：

<el-form-item label="主题描述" prop="themeDesc" class="input-item">

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

您可能感兴趣的文章:

Vue3 响应式高阶用法之customRef()的使用
customRef()是Vue3的高级工具,允许开发者创建具有复杂依赖跟踪和自定义更新逻辑的ref对象,本文详细介绍了customRef()的使用场景、基本用法、功能详解以及最佳实践,包括防抖、异步更新等用例,旨在帮助开发者更好地理解和使用这一强大功能
2024-09-09
vue3监听路由的变化代码示例
在vue项目中假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新,这篇文章主要给大家介绍了关于vue3监听路由的变化的相关资料,需要的朋友可以参考下
2023-09-09
vue之debounce属性被移除及处理详解
今天小编就为大家分享一篇vue之debounce属性被移除及处理详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
基于Vue中点击组件外关闭组件的实现方法
下面小编就为大家分享一篇基于Vue中点击组件外关闭组件的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue实现上传图片添加水印
这篇文章主要为大家详细介绍了vue实现上传图片添加水印，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
vue 自定义icon图标的步骤
这篇文章主要介绍了vue 自定义icon的图标的步骤，文中大概给大家分为两步骤，通过实例图文相结合给大家介绍的非常详细,需要的朋友可以参考下
2021-08-08
Vue3组件更新中的DOM diff算法示例详解
虚拟dom是当前前端最流行的两个框架（vue和react）都用到的一种技术,都说他能帮助vue和react提升渲染性能,提升用户体验,下面这篇文章主要给大家介绍了关于Vue3组件更新中的DOM diff算法的相关资料,需要的朋友可以参考下
2022-04-04
vue.js自定义组件实现v-model双向数据绑定的示例代码
这篇文章主要介绍了vue.js自定义组件实现v-model双向数据绑定的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
vue实现浏览器桌面通知的示例代码
本文主要介绍了vue实现浏览器桌面通知的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
Vue打包为相对路径的具体实现方法
在Vue.js项目中,构建后的资源文件（如CSS、JavaScript文件、图片等）通常会被放置在指定的目录下,为了确保这些文件能够被正确加载,Vue CLI 提供了配置选项来指定这些文件的路径,本文给大家介绍了Vue打包为相对路径的具体实现方法,需要的朋友可以参考下
2024-09-09