最近学习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. Java ORM Hibernate 入门笔记

    一.下载 官网地址:http://hibernate.org/ Hibernate下有ORM(关系型数据库).OGM(NoSQL数据库).Search(对象全文检索).Validator的工具. OR ...

  2. linux下安装Sublime Text3并将它的快捷方式放进启动器中

    Sublime Text是一个代码编辑器,我主要是用它来编辑python.下面就来简单说明下它在linux的安装过程吧! 1.添加sublime text3的仓库 首先按下快捷键ctrl+alt+t打 ...

  3. ORACLE 监听

    今天来学习一下监听的相关内容,昨晚被老大问了两个关于监听很简单的问题,但是却吞吞吐吐回答,而且有一个问题还答错了,刚刚查了下资料,才发现"驴头对了马嘴",哭笑不得. 一.监听(li ...

  4. Python的几个小程序,其实我觉得可以称作初学时的基础算法

    昨天学习的,今天做一下整理,以前学过几天c,感觉什么都没有搞出来,有点泄气,看到Python后试试,从最基本的东西学起,希望不要辜负我的这一点热情. if语句的应用 n=1 while n<5: ...

  5. Java基础学习笔记总结

    Java基础学习笔记一 Java介绍 Java基础学习笔记二 Java基础语法之变量.数据类型 Java基础学习笔记三 Java基础语法之流程控制语句.循环 Java基础学习笔记四 Java基础语法之 ...

  6. C语言程序设计(基础)- 第4周作业

    一.PTA作业 完成PTA第四周作业中8个题目,并将其中4个题目的思路列在博客中. 1.7-1 计算分段函数[1] 2.7-2 A除以B 3.7-6 阶梯电价 4.7-7 出租车计价 随笔具体书写内容 ...

  7. alpha冲刺第十天

    一.合照 二.项目燃尽图 三.项目进展 之前卡住的注册无法插入数据的问题解决 可以呈现多条数据内容了,首页文章内容呈现,问答界面问题内容呈现 四.明日规划 很多没有完善的,后面还是要继续整改 五.问题 ...

  8. Beta敏捷冲刺每日报告——Day1

    1.情况简述 Beta阶段Scrum Meeting 敏捷开发起止时间 2017.11.2 00:00 -- 2017.11.3 00:00 讨论时间地点 2017.11.2 晚9:30,电话会议会议 ...

  9. Alpha冲刺第十一天

    Alpha冲刺第十一天 站立式会议 项目进展 项目进入尾声,主要测设工作完成过半,项目总结也开始进行. 问题困难 项目的困难现阶段主要是测试过程中存在一些"盲点"很难发现或者发现后 ...

  10. python 特殊方法实例

    import collections from random import choice card = collections.namedtuple('Card',['rank','suit']) # ...