zoukankan      html  css  js  c++  java
  • 还原Vue.js的data内的数组和对象

    最近学习Vue.js发现其为了实现对data内的数组和对象进行双向绑定,将数组和对象进行了封装。

    如下的对象

    todos: [
        {
            id: 1,
            title: 'Do the dishes',
        },
        {
            id: 2,
            title: 'Take out the trash',
        },
        {
            id: 3,
            title: 'Mow the lawn'
        }
    ]

    会被封装成:

    而封装后的这个对象传递到后台会出现无法识别的现象。

    于是,我开始尝试将Vue.js封装后的对象进行封装。

    var restore = function (vueObject) {
        var result = null;
        var type = Object.prototype.toString.call(vueObject);
    
        switch (type) {
            case '[object Array]':
                result = toArray(vueObject);
                break;
    
            case '[object Object]':
                result = toObject(vueObject);
                break;
    
            default:
                result = vueObject;
                break;
        }
    
        function toArray(vueArray) {
            var array = [];
    
            for (var index in vueArray) {
                var item = restore(vueArray[index]);
                array.push(item);
            }
    
            return array;
        }
    
        function toObject(vueObject) {
            var obj = new Object();
    
            for (var index in vueObject) {
                var item = restore(vueObject[index]);
                obj[index] = item;
            }
    
            return obj;
        }
    
        return result;
    };

    测试用例:

    var json = {
        a: [
            {
                a1: {
                    a11: [1, 2, 3],
                    a12: [1, 2, 3]
                },
                a2: [{ a21: '21' }]
            },
            {
                a3: {
                    a31: [1, 2, 3],
                    a32: [1, 2, 3]
                },
                a4: [{ a41: '41' }]
            }
        ],
        b: {
            b1: 'b1',
            b2: 2
        }
    };

    Vue.js对象:

    转换后的结果:

    {"a":[{"a1":{"a11":[1,2,3],"a12":[1,2,3]},"a2":[{"a21":"21"}]},{"a3":{"a31":[1,2,3],"a32":[1,2,3]},"a4":[{"a41":"41"}]}],"b":{"b1":"b1","b2":2}}
  • 相关阅读:
    nginx接收tcp请求转发server
    eclipse 配置github 提交代码
    eclipse安装JDK11
    java内存管理
    进程 线程 纤程 中断
    DCL单例为什么要加volatile
    如何清理history
    后置引用
    nc 工具使用
    ip_local_port_range 和 ip_local_reserved_ports
  • 原文地址:https://www.cnblogs.com/eagle6688/p/8125532.html
Copyright © 2011-2022 走看看