Vue表单怎么只提交修改过的部分
发布于 2 个月前 作者 huaer 294 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

请教各位,想用axios patch方法提交一个表单,只想提交有做过修改的值,譬如图中,我只改过安装地址,只想提交安装地址这一个的值

vue用的是elementUI,devinfo是我从后端取到的值如
{
“id”: “xxx”,
“name”: “xxx”,
“type”: “xxx”,
“addr”: “xxx”,
“phonenumber”: “xxx”,
“state”: “online”,
“longitude”: xxx,
“latitude”: xxx,
“height”: 3.5,
“macaddr”: “xxx”,
“version”: “xxxx”
}
现在我只更改安装地址,想只发送
{
“addr”: “xxxxxx”,
}
该如何做?
补上vue端代码:

2 回复

获取到数据的时候 可以 clone 一份 , 然后提交的时候 比对一下就好了。 伪代码大致如下:

data() {
     return {
        ……  之前的数据不变
        rawDev:  null,  //记录设备原始数据
        diffData: null,  //记录修改过的值
    }
},
methods: {
       // 假设这是获取设备数据的方法
       getDevinfo() {
             this.axios(……).then(({status, data}) => {
                     this.devinfo = data;
                     this.rawDev = {...data};   // clone 一份数据 当做原始数据 
             })
       },
       // 比较数据
       diffDevinfo() {
            for(let k in  this.rawDev) {
                  if(this.rawDev[k]  !=  this. devinfo[k]) {
                           if (!this.diffData) {
                                this.diffData = {};
                            }
                           this.diffData[k] = this.devinfo[k];
                  }
            }
       },
       //提交数据
       patchDev() {
               this.diffDevinfo();
               if(!this.diffData) {
                    console.log("未修改数据不提交")
                    return true;
               }

              // TODO:: axios 提交数据
       }

}

嗯嗯,可以了,多谢多谢!

回到顶部