最近学习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}}

还原Vue.js的data内的数组和对象的更多相关文章

  1. vue.js 强行赋值、刷新数组或者对象 方法之 $.set()

    实际开发过程中,数据交互的的时候需要赋值,刷新,但是不可能每次赋值之后都刷新整个页面,所以就要用到 vue.js方法 $.set(),能实现赋值对象的局部刷新 语法:Vue.set(object, k ...

  2. vue.js 中 data, prop, computed, method,watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  3. 【laravel5.4+vue.js】laravel 循环三维数组,解决:htmlentities() expects parameter 1 to be string, array given

    laravel循环三维数组   +++   vue.js循环三维数组  (数据均是以三维数组形式存在的) <form-item label="权限名称" prop=" ...

  4. Vue.js中data,props和computed数据

    data data 是Vue实例的数据对象.Vue将会将data 的属性转换为 getter/setter, 也就是用Object.defineProperty方法(在官网里面有深入响应式原理里面具体 ...

  5. js判断一个变量是数组还是对象

    判断变量是数组还是对象,使用Object.prototype.toString.call(),兼容性好,切勿使用typeof来判断对象或者数组,因为typeof得到的都是object: functio ...

  6. js 中判断变量是数组还是对象,和判断对象是否为空

    判断是对象还是数组  var ids={ id:'1',num:'2' } if(Array.isArray(ids) == false) {console.log('不是数组,对象') } else ...

  7. vue js 在组件中对数组使用splice() 遇到的坑。。。

    遇到的问题: 用el-dialog写了个子组件 要实现在子组件中增删数据 点击确定后把值返回给父组件 父组件在每次点开子组件时都会把自己的值传进去. //父组件传值 this.$refs.transf ...

  8. 《深入浅出vue.js》阅读笔记之数组变化侦测

    1.如何追踪变化 数组的侦测方式和对象不同,比如: this.list.push(1) 此时并不会像改变对象一样触发setter. 同理,要侦测数组的变化意味着我们在改变数组的时候得到通知,如图,我们 ...

  9. vue学习(十) v-for循环普通数组 、对象数组、 迭代数字

    //html <div id="app"> <p v-for="item in list">{{item}}</p> < ...

随机推荐

  1. Android_内部文件读取

    我们这里做一个安卓的简易的文件读取程序之记住密码 首先我们先明确安卓的存储路径, 所有安装至手机的应用都会在 data/data 目录下生成一个安卓文件夹(包名),这个文件夹就是安卓存储的路径 在运行 ...

  2. shell死循环脚本示例

    1.设计一个脚本,监控远程的一台机器(假设ip为192.168.0.28)的存活状态,当发现宕机时发一封邮件给你自己. 提示:1. 你可以使用ping命令   ping -c10 www.baidu. ...

  3. 【Android】带进度条的WebView

    http://www.cnblogs.com/over140/archive/2013/03/07/2947721.html

  4. 使用listview空控件展示数据

    1.使用listview控件可以一次性的将有关的全部图像保存在控件中,建立集合图像. 图像列表控件的主要属性 属性                                           ...

  5. linux系统无法正常启动,故障排查恢复

    linux内核启动修复 首先看linux内核重要文件grub.conf # grub.conf generated by anaconda # # Note that you do not have ...

  6. 阿里聚安全·安全周刊】一种秘密窃取数据的新型 Android 木马|iOS 11相机惊现BUG

    本周的七个关键词:  新型 Android 木马丨 TLS 1.3 丨  阿里安全图灵实验室 丨 漏洞感染 Linux 服务器 丨 CPU曝极危漏洞 丨   iOS 11相机BUG 丨R2D2技术 - ...

  7. 浅谈element-ui中的BEM范式实践

    日常的工作中,我们无时无刻不在和样式打交道.没有样式的页面就如同一部电影,被人随意地在不同地方做了截取. BEM规范应该是对于我们现在前端组件开发中我觉得是最合适的一套范式了.所以,我在自己的日常工作 ...

  8. backpropagation

    github: https://github.com/mattm/simple-neural-network blog: https://mattmazur.com/2015/03/17/a-step ...

  9. Linux下Java通用安装方法

    1.到oracle官网下下载对应jdk包,一般为%x64%.tar.gz格式. 2.建立目录: $ mkdir /usr/local/java 3.将压缩包解压至/usr/local/java 4.修 ...

  10. 在Apache中运行Python WSGI应用

    我们介绍如何使用Apache模块mod_wsgi来运行Python WSGI应用. 安装mod_wsgi 我们假设你已经有了Apache和Python环境,在Linux或者Mac上,那第一步自然是安装 ...