VUE 表单点击编辑，再点击添加，数据无法清空问题（新增和修改用一个弹窗）

最新推荐文章于 2024-07-16 16:08:01 发布

傻猴儿

最新推荐文章于 2024-07-16 16:08:01 发布

阅读量703

点赞数 4

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lkm987654321/article/details/135948514

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章讨论了在使用Vue.js中的Dialog组件时，如何在点击编辑后再点击新增时，由于数据已赋值，resetFields方法无法将表单数据清空。作者提供了额外的方法，通过遍历表单对象并将其值设为来清除input数据。

摘要由CSDN通过智能技术生成

表单点击编辑，再点击添加，数据无法清空问题

在使用dialog 弹框，点击编辑再点击新增，由于数据数据已经赋值了，所以this.$refs[addForm].resetFields()，无法把数据重置为空[] ，因此在下面还需要添加一个方法将input里面的数据逐一去除：

if (this.$refs['addForm'] !== undefined) {
	this.$refs.addForm.resetFields()
}

//清理input数据
for(let key in this.form){
  this.form[key]=""
}

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

傻猴儿

关注关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE 表单点击编辑，再点击添加，数据无法清空问题（新增和修改用一个弹窗）

VUE 表单点击编辑，再点击添加，数据无法清空问题（新增和修改用一个弹窗）
复制链接

扫一扫

专栏目录

element ui dialog 表单点击编辑，再点击添加，数据无法清空问题解决办法

xiawenyi1234的博客

08-07

4567

问题原因分析 vue element ui在做编辑和添加时候通常使用一个dialog 弹框，这样就会出现一个问题，点击编辑再点击添加，这时候数据已经赋值了，所以this.$refs[formName].resetFields()，无法把数据重置为空[] 这肯定不是我们想要的结果，后面是这样解决的，在点击添加按钮的时候解决方式 element Ui新增表单的时候，表单默认数据是新增get_new_data,编辑的时候表单默认数据是get_edit_data,这两个数据只能填一个，根据当前状态（

vue实现表单未编辑或未保存离开弹窗提示功能

10-15

主要介绍了vue实现表单未编辑或未保存离开弹窗提示功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

参与评论您还未登录，请先登录后发表或查看评论

element-ui表单先编辑后新增清空无效解决办法

Lynn

03-21

985

使用dialog弹出form表单的时候，由于需要，可能会给表达赋初始值，比如编辑操作的时候，会从外面传入数据，赋值到表单上。2、当我们先编辑再新增，会对表单赋值，初始值就是我们赋的值，调用resetFields()方法，表单里还有之前赋的值，并不是我们希望得到的清空表单。在open方法里，不要直接做赋值操作，加上this.$nextTick方法，在这个方法里面做操作，这个时候form已经mounted结束了。1.页面有个新增和编辑共用的弹出框，在页面初始化后先点新增，后编辑，正常。

Element-UI使用el-upload组件第二次上传无效问题，文件回显添加文件到elupload组件

最新发布

Aotman_的博客

07-16

1511

Element-UI使用el-upload组件第二次上传无效问题，文件回显添加文件到elupload组件

vue2 el-dialog中创建和编辑使用同一个el-form 导致数据回显的bug

qq_49252275的博客

12-06

673

el-form创建和编辑回显bug

Element UI + Vue 新增和编辑共用表单校验无法清除问题（已解决）

wjp1073041977的博客

10-24

787

表单校验清除失效解决方案

avue：先打开编辑弹窗取消后，再新增弹窗会携带编辑数据

Smile_Gently的博客

08-22

786

这个会进入无限递归。

vue中组件数据回显后无法清空

qi0805的博客

11-30

2113

这种情况一般出现在父组件传值给子组件，我们通过props接收子组件的值，在子组件内进行回显，回显完成后进行清空，发现清空不了。在这种时候我们要记住在子组件是不能更改父组件的值的。有两种方法可以帮助我们清空这个值。 1：比较暴力的方法，我们将从父组件获取到的值重新深复制一份，在子组件里使用新的数据，这样就可以清空值了。 created() { this.selectObj = JSON.parse(JSON.stringify(this.formInline)...

Vue Element-UI dialog弹框表单编辑后再点击新增表单无法重置问题

小破孩的博客

10-27

3671

问题描述在用ElementUI做动态表单时，数据的修改都是打开dialog（子组件）中进行操作的，但是在修改数据时，正常来说可以直接调用 this.$refs[str].resetFields() 直接清空，但是这里会出现一个问题: form表单的重置是以第一次打开的数据作为重置标准,如果先打开的是编辑,那么重置之后以第一次更新的数据作为标准，即表单的数据为编辑时的数据; 解决方式点击编辑的时候使用nextTick 处理一下form的数据 _.cloneDeep(value)：数据深拷贝 .

关于页面点击编辑弹窗后关闭在重新打开新增弹窗下拉框表单验证提示不消失问题

qq_57826511的博客

04-01

1620

解决方法： dialog对话框，添加 destroy-on-close 属性；(html 第4行) 表单校验 trigger 的值设置为 change(不是重点，change是值发生变化时触发校验)；在新增点击事件里添加$nextTick()方法；(js 中第19行) 在$nextTick方法里调用表单里的 clearValidate() 方法。(js 中第20行) <el-button @click="addDialogForm">打开新增弹窗</el-button&gt..

vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作

10-15

在Vue.js应用中，我们经常需要处理添加和编辑数据的功能，而这些操作通常会使用到同一个表单。在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑...

Vue 一键清空表单的实现方法

10-15

2. 编辑弹窗在用户点击取消或关闭后，需要清空表单中的数据，恢复到初始状态。在Vue中实现表单清空的方法有多种，但核心思路是相同的，即通过操作数据来控制表单显示的内容。关键在于要确保数据的深拷贝，避免因为...

vue中关于重置表单数据出现undefined的问题

upStar1的博客

07-01

2867

解决vue中，给表单数据重新赋值空字符串，却把数据变成undefined的问题。是由于v-model的双向绑定，空字符串没有对应的数据，导致变成了undefined。所以需要给空字符串绑定数据，或者在它为undefined的时候赋值空字符串。 ...

React Hook antd Form回显表单，form.resetFields()清除无效问题

weixin_45961018的博客

05-22

1049

可能的原因：1. 表单值没有绑定到 form 组件上；2. 使用了表单域的 initialValue 属性，此属性值不会被 resetFields 清空；3. resetFields 调用的时机不正确：表单值还没有被重新赋值就调用 resetFields。

elment组件库，编辑关闭后，新增时又回显数据的问题

chihirov的博客

06-04

403

这里说它是重置表单，然后我就在想重置并不是清空吧。看了一眼编辑打开的时候，我给表单传了默认值，原来是重置表单的时候，把编辑传进去的默认值，填充进去了。------------------------------------------------------------- 手动分割。如图，新增的时候，把编辑过的数据回显了，造成的原因是什么呢?我明明在关闭弹窗的时候写了resetFields()需要注意，如果form中存在数组或其他复杂类型的数据，需要更换成自己需要的初始值。

使用vue框架，数据回显之后不能编辑删除的问题

m0_71843547的博客

01-01

557

在vue实例创建时，obj.b并未声明，因此就没有被vue转换为响应式属性，从而不会触发视图的更新。$set()方法相当于手动的把obj.b处理成为一个响应式的属性，此时视图也会跟着改变了。在编辑操作中，把数据回显完之后，输入框实现了数据回显，但是不能删除修改输入框的值。

elementui中的新增弹窗在新增成功后如何快速清空所有表单数据

m0_50441807的博客

05-13

3527

在实际开发中，新增弹窗的form表单中输入内容后，新增成功后应该把form表单清空，不然下次再进入新增弹窗时，会有上次新增完的内容： form表单项少的话可以选择手动删除： save() { // 保存成功后，清空form表单数据 this.form = { name:'', age:'', pass:'' } } 以上的方法当然也是可以的，但是如果form表单有很多项的话，你需要写很多清空代码； elementui中的form提供resetFields方法，用于清空所有表单数据，前提是

vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

xing.org1^

07-06

324

第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里：根据sessionstorage的特性，做一下各个方法的封装： const ls = window.sessionStorage; export default { getItem(key) {...

Vue2项目使用element ui Form表单、表单验证，在使用Form的时候遇到的一些问题，清空表单，重置表单。

qq_43336145的博客

07-31

1179

（注意1：如果按钮不写在form表单里面则获取不到表单的验证规则，则也就无法进行表单验证。注意2：有时候会忘记给表单添加ref，如果没有添加ref，点击按钮之后则也会获取不到表单的验证规则，所以一定要满足这两个条件。上面内容完成之后则需要在点击确定的时候触发表单验证，将按钮写在form表单里面，然后通过点击事件将form表单传递过去，然后进行判断，如果验证未通过则返回error。在平时我们开发管理系统项目的时候，为了方便快速的开发，减少项目开发时间。属性传入约定的验证规则，并将 Form-Item 的。

vue2点击添加，弹窗表单添加用户信息

06-13

好的，我可以为您提供一个基本的Vue2点击添加按钮后弹出表单添加用户信息的代码示例。首先，您需要在Vue组件中创建一个按钮，并为该按钮绑定一个点击事件，触发该事件后弹出表单。然后，您需要在Vue组件中创建一个弹窗，并在该弹窗中创建一个表单，用于添加用户信息。以下是一个简单的示例代码，您可以在此基础上进行修改和扩展： ``` <template> <div> <h2>用户列表</h2> <ul> <li v-for="user in userList" :key="user.id"> {{ user.name }} - {{ user.email }} - {{ user.phone }} </li> </ul> <button @click="showAddUserForm()">添加用户</button> <div v-if="showAddUserDialog"> <div class="modal-mask"></div> <div class="modal-wrapper"> <div class="modal-container"> <h2>添加用户</h2> <form> <div> <label for="name">姓名:</label> <input type="text" id="name" v-model="newUser.name"> </div> <div> <label for="email">邮箱:</label> <input type="email" id="email" v-model="newUser.email"> </div> <div> <label for="phone">电话:</label> <input type="text" id="phone" v-model="newUser.phone"> </div> <div> <button type="submit" @click.prevent="addUser()">添加用户</button> <button @click="hideAddUserForm()">关闭</button> </div> </form> </div> </div> </div> </div> </template> <script> export default { data() { return { userList: [ { id: 1, name: '张三', email: 'zhangsan@example.com', phone: '13800000001' }, { id: 2, name: '李四', email: 'lisi@example.com', phone: '13800000002' }, { id: 3, name: '王五', email: 'wangwu@example.com', phone: '13800000003' } ], showAddUserDialog: false, newUser: { name: '', email: '', phone: '' } } }, methods: { showAddUserForm() { this.showAddUserDialog = true }, hideAddUserForm() { this.showAddUserDialog = false // 清空表单数据 this.newUser = { name: '', email: '', phone: '' } }, addUser() { // 在这里编写将用户数据提交到后端的代码 console.log(this.newUser) // 提交成功后，将新用户添加到用户列表中 this.userList.push({ id: this.userList.length + 1, name: this.newUser.name, email: this.newUser.email, phone: this.newUser.phone }) // 清空表单数据并关闭弹窗 this.hideAddUserForm() } } } </script> ``` 在这个示例代码中，我们创建了一个包含用户列表和添加用户按钮的Vue组件。当用户单击“添加用户”按钮时，将会触发 `showAddUserForm` 方法，该方法将会设置 `showAddUserDialog` 属性为 `true`，从而显示弹窗。在弹窗中，我们创建了一个表单，用于添加新用户信息。当用户单击“添加用户”按钮时，将会触发 `addUser` 方法，该方法将会将新用户添加到用户列表中，并清空表单数据并关闭弹窗。当然，这只是一个非常简单的示例代码，您需要根据您的实际需求进行修改和扩展。