美文网首页
【vue+elementui】对象嵌套数据取值与重置值

【vue+elementui】对象嵌套数据取值与重置值

作者: IrisLong | 来源:发表于2021-02-20 11:18 被阅读0次

数据格式示例:

mulForm: {
    companyId: '',
    wealthNo: '',
    configWealthmanagementproducts: {
        riskLevel: '',
        currencyId: '',
    }
},

问题描述:

  1. 嵌套对象内部,通过select切换元素A,连带修改其他元素,控制台报key值重复的错误
  2. 第二次进入新增弹窗界面,第一次新增的嵌套对象 configWealthmanagementproducts 内部的值依旧存在,并没有清空重置
  3. 编辑弹窗元素,第一次可以取到值,点击取消按钮后再次进入页面,嵌套对象内部值全部被清空
  4. 第一次进入编辑页面操作嵌套对象内部元素后退出弹窗界面,第二次重新进入界面,嵌套对象内部属性值混乱

核心代码:

methods: {
        editOne(type, row) {
        this.choose = type
        this.$set(this.form, 'businessType', this.buyList[0].id)
        if (type === 'edit') {
                        // 点击编辑按钮时深拷贝对象,解决问题3,问题4
            let copyRow = deepCopy(row)
            this.form = {
                ...copyRow,
            }
            this.$set(this.form, 'buyDate', this.formatterTime(row.buyDate))
            this.$set(this.form, 'exceptEndDate', this.formatterTime(row.exceptEndDate))
            console.log(this.form)
        }
        this.dialogVisible = true
    },
        cancelMethod() {
        this.dialogVisible = false
                // 深拷贝原对象,避免间接修改原对象,解决问题2
        let obj = deepCopy(this.form.configWealthmanagementproducts)
                // 遍历清空嵌套对象的内部属性值,解决问题1
        for (let key in obj) {
            obj[key] = ''
        }
        this.form = {
            configWealthmanagementproducts: {},
        }
        this.$refs['form'].resetFields()
    },
}
  • 对象的深拷贝VS浅拷贝:前者原对象不会被影响,后者修改拷贝的对象,原对象也会被随之修改

补充:对象的深拷贝

export function deepCopy(obj) {
    if (obj == null) {
        return null
    }
    let result = Array.isArray(obj) ? [] : {}
    for (let key in obj) {
        if (Object.hasOwnProperty.call(obj, key)) {
            if (typeof obj[key] === 'object') {
                // 如果是对象,再次调用该方法自身
                result[key] = deepCopy(obj[key])
            } else {
                result[key] = obj[key]
            }
        }
    }
    return result
}

相关文章

  • 【vue+elementui】对象嵌套数据取值与重置值

    数据格式示例: 问题描述: 嵌套对象内部,通过select切换元素A,连带修改其他元素,控制台报key值重复的错误...

  • JavaScript 多级嵌套对象取值

    看下lodash官方用法 _.get(object, path, [defaultValue]) 根据 objec...

  • ES6 学习(对象解构篇)

    - 对象解构赋值 ** 对象的取值是由属性取值对象的值也可以设置默认值(见数组结构篇) ** 解构例子 如果变量名...

  • 值栈中放数据

    向值栈放数据多种方式 1、第一种,获取值栈对象,调用值栈对象里面的set方法2、第二种,调用值栈对象里面的push...

  • redis中String类型命令

    一.基本操作 1.存储值,获取值 2.总结 String 类型可以保存对象数据 可以使用

  • 列表生成式和解析式

    列表生成式 值的集合 for 取值对象 in 取值对象的索引(取多少个)randint(-10,10) :生成...

  • js localStorage 存值 取值 新增 和删除

    定义 Storage 对象,对象有get(取值), set(设置), add(加入新值)三个方法 一 取值 二 存...

  • 22.属性zoom取值

    22.属性zoom取值 (1)定义:设置或检索对象的缩放比例 (2)取值: a.normal:(默认值),使用对象...

  • mysql进阶操作json篇(二)

    一、 样例数据准备 建表 数据填充 二、操作测试 获取单层json值 获取嵌套json值 -- 获取嵌套值并提取域...

  • 解构赋值

    解构赋值 数组的解构赋值 嵌套,默认值,展开符 对象的解构赋值 对象解构赋值的本质与简写 对象解构的模式与变量 对...

网友评论

      本文标题:【vue+elementui】对象嵌套数据取值与重置值

      本文链接:https://www.haomeiwen.com/subject/snutfltx.html