vue中表单修改只提交被更新的字段

女爷i 2022-09-04 06:43 161阅读 0赞

> 解析：开发中经常遇到编辑表单，如果需要在编辑时，只传递用户更新了的字段给后台，而不是把整个表单都提交给后台的话，如何解决？

## 思路： ##

*  得到编辑表单之前的原始数据存入如：`rawData` 中，注意将数据解构
 *  更新表单时，提交之前将表单数据`ruleForm` 和 原始数据进行比较
 *  得出差异数据，将差异数据提交给表单即可

## 代码实现 ##

部分核心代码

data() { 
    	return { 
    		rawData: { },
          	diffData: { }
    	}
    },
    methods: { 
        open(type, data) { 
          if (type === 'edit') { 
            this.ruleForm = data
            this.rawData = { ...data}
          }
          this.visible = true
        },
        getDiffData() { 
          Object.keys(this.rawData).forEach(item => { 
            this.diffData = { }
            if (this.rawData[item] !== this.ruleForm[item]) { 
              this.diffData[item] = this.ruleForm[item]
            }
          })
        },
        edit(formName) { 
          this.$refs[formName].validate((valid) => { 
            if (valid) { 
              this.getDiffData()
              this.$http.put('api', {  id: this.ruleForm.id, data: this.diffData }).then(data => { 
                // ...
              }).catch((error) => { 
              }).finally(() => { 
              })
            } else { 
              return false
            }
          })
        }
     }

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5中表单提交的4种验证方法

![8b83d0f40e19b37f608e235e682a9d9a.jpeg][] 一、自动验证我们可以通过元素的属性设置，进行[表单][Link 1]提交的验证。

桃扇骨/ 2024年04月01日 17:34/ 0 赞/ 24 阅读

相关 vue中表单输入绑定的修饰符

表单输入修饰符： 1， .lazy 该修饰符将输入框的值和数据的同步时机由在input事件时转为 change 事件之后； input事件和 chang

太过爱你忘了你带给我的痛/ 2022年12月17日 07:21/ 0 赞/ 109 阅读

相关 vue中表单修改只提交被更新的字段

> 解析：开发中经常遇到编辑表单，如果需要在编辑时，只传递用户更新了的字段给后台，而不是把整个表单都提交给后台的话，如何解决？思路：得到编辑表单之前的原始数据

女爷i/ 2022年09月04日 06:43/ 0 赞/ 162 阅读

相关表单提交前判断表单是否被修改过

功能描述有时，页面表单需要判断是否已经被修改过，若没修改过，可能不需要提交或做其他操作，若修改过，提醒用户是否需要保存，这样的场景在web页面中

秒速五厘米/ 2022年08月26日 01:00/ 0 赞/ 191 阅读

相关 html中表单提交注意事项

1.表单标签的使用——重点/难点表单(form)：用于收集用户的数据，提交给服务器上某个页面，该页面可以对表单中提交的数据进行保存或查询(由php/jsp/aspx来担

叁歲伎倆/ 2022年06月12日 13:22/ 0 赞/ 203 阅读

相关网页中表单按回车就自动提交的问题总结

当form表单中只有一个输入框时，焦点在此输入框中，按回车键将自动将表单提交。 <form action="http://www.baidu.com">

向右看齐/ 2022年06月06日 04:25/ 0 赞/ 256 阅读

相关 Git修改已经被覆盖的提交

本文摘选自文章：[【Jitwxs】Git教程][Jitwxs_Git] 或[【CSDN】Git教程][CSDN_Git] -------------------- 如果你不

比眉伴天荒/ 2022年06月05日 11:41/ 0 赞/ 157 阅读

相关 ssh中表单提交到action时报错

org.springframework.beans.ConversionNotSupportedException: Failed to convert property va

阳光穿透心脏的1/2处/ 2022年04月23日 14:40/ 0 赞/ 162 阅读

相关 hibernateTemplate update 只更新被修改字段

如果你用hibernateTemplate操作数据库，感觉的确很省代码，一行代码解决数据库增改删查，但当你做到一个功能只更新一个字段，你就有点懵逼了，怎么试就是不行，总的

柔情只为你懂/ 2022年04月21日 15:32/ 0 赞/ 230 阅读

相关 jQuery:提交表单前判断表单是否被修改过

$("\myform :input").change(function() \{ $("\myform").data("changed",true); \}

小灰灰/ 2021年06月24日 13:59/ 0 赞/ 376 阅读