微学网

热门关键词:   as  thinkphp  ecshop  xxx  商务通  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

对象数组深拷贝(表单提交页面,有重置功能) vue项目中

发布时间:2021-05-14 来源:未知 点击:

表单提交需要重置功能时,如果不先把原始数据拷贝一份,修改之后,再重置会回不去!!!(对象或数组引用数据类型)

封装一个公共的方法:如下,一般放在项目的utils文件夹中utils.js中,

/**
 * @param data 需要深拷贝的数据
 * @returns {*} 返回拷贝之后的数据
 */
  function deepCopy(data){
    const t = typeof data;
    let o;
    if(t==='array'){
        o = []
        for(let i = 0;i<data.length;i++){
            o.push(deepCopy(data[i]))
        }
    }else if(t==='object'){
        o = {}
        for(let i in data){
            o[i] = deepCopy(data[i])
        }
    }
    return o;
}
export default{
    deepCopy
}

使用:

<template>
    
</template>
<script>
import utils from '@/utils/utils'

export default {
    data(){
       return {
           formInfo:{},//表单的初始数据
           defaultFormInfo:{},
       } 
    },
    methods:{  
        reset(){//重置按钮
            this.formInfo = this.defaultFormInfo
        },
        infoCommit(){
            let params = utils.deepCopy(this.formInfo)
            // params 编辑好的内容传到后端
        },

    },
    created(){
        // 使用深拷贝的目的就是:防止formInfo的修改影响到defaultFormInfo,想要重置(不想修改)的时候,点击重置回不去
        this.defaultFormInfo = utils.deepCopy(this.formInfo)//先复制一份表单的初始数据
    }

}
</script>

这就是微学网-程序员之家为你提供的"对象数组深拷贝(表单提交页面,有重置功能) vue项目中"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/14482.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 | 学习教程 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2021 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟学习网,提供各类程序编程入门,技巧