还原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}}
还原Vue.js的data内的数组和对象的更多相关文章
- vue.js 强行赋值、刷新数组或者对象 方法之 $.set()
实际开发过程中,数据交互的的时候需要赋值,刷新,但是不可能每次赋值之后都刷新整个页面,所以就要用到 vue.js方法 $.set(),能实现赋值对象的局部刷新 语法:Vue.set(object, k ...
- vue.js 中 data, prop, computed, method,watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- 【laravel5.4+vue.js】laravel 循环三维数组,解决:htmlentities() expects parameter 1 to be string, array given
laravel循环三维数组 +++ vue.js循环三维数组 (数据均是以三维数组形式存在的) <form-item label="权限名称" prop=" ...
- Vue.js中data,props和computed数据
data data 是Vue实例的数据对象.Vue将会将data 的属性转换为 getter/setter, 也就是用Object.defineProperty方法(在官网里面有深入响应式原理里面具体 ...
- js判断一个变量是数组还是对象
判断变量是数组还是对象,使用Object.prototype.toString.call(),兼容性好,切勿使用typeof来判断对象或者数组,因为typeof得到的都是object: functio ...
- js 中判断变量是数组还是对象,和判断对象是否为空
判断是对象还是数组 var ids={ id:'1',num:'2' } if(Array.isArray(ids) == false) {console.log('不是数组,对象') } else ...
- vue js 在组件中对数组使用splice() 遇到的坑。。。
遇到的问题: 用el-dialog写了个子组件 要实现在子组件中增删数据 点击确定后把值返回给父组件 父组件在每次点开子组件时都会把自己的值传进去. //父组件传值 this.$refs.transf ...
- 《深入浅出vue.js》阅读笔记之数组变化侦测
1.如何追踪变化 数组的侦测方式和对象不同,比如: this.list.push(1) 此时并不会像改变对象一样触发setter. 同理,要侦测数组的变化意味着我们在改变数组的时候得到通知,如图,我们 ...
- vue学习(十) v-for循环普通数组 、对象数组、 迭代数字
//html <div id="app"> <p v-for="item in list">{{item}}</p> < ...
随机推荐
- 【pyHook】 监测键盘鼠标事件等
[pyHook] pyHook是一个用来进行键盘.鼠标等层面事件监控的库.这个库的正常工作需要pythoncom等操作系统的API的支持.首先来说说如何安装. 直接pip install pyHook ...
- 【Python】 关于import和package结构
关于import语句 python程序需要使用某个第三方模块的话要用import语句,其实就是把目标模块的内容加载到内存里.当然,在加载之前,python会按照一定的顺序寻找sys.path中的目录. ...
- 【Python】 hash值计算 hashlib & hmac
hashlib & hmac *不是很清楚能不能把这种hash值取样算法称之为加密,但是似乎好像也是这么说的哈(非科班出身的野路子就是没这种基本知识的) ■ 基本用法 hashlib支持MD5 ...
- 网络通信 --> IO多路复用之select、poll、epoll详解
IO多路复用之select.poll.epoll详解 目前支持I/O多路复用的系统调用有 select,pselect,poll,epoll,I/O多路复用就是通过一种机制,一个进程可以监视 ...
- java 打印近似圆
只要给定不同半径,圆的大小就会随之发生改变近似圆如图 设半径为r,圆心为(r,r). 由勾股定理 易得y = r -√(2*r*x-x*x) 此处注意x+=2.因为打印窗口上一行2个字节的宽度与一列的 ...
- [bzoj1497][NOI2006]最大获利_网络流_最小割
最大获利 bzoj-1497 题目大意:可以建立一个点,花费一定的代价:将已经建立的两个点之间连边,得到一定收益.有些节点之间是不允许连边的. 注释:1<=点数<=5,000,1<= ...
- 使用Java客户端操作elasticsearch
Java REST客户端有两种风格: Java低级别REST客户端(Java Low Level REST Client,以后都简称低级客户端算了,难得码字):Elasticsearch的官方low- ...
- Java 自定义实现链表
自定义实现链表很简单,只需要明白链表是什么样子的数据结构. 下图表示一种单向列表.其中指针first指向队头,last指向队尾,curr指向当前读的数据. 下面是我的实现代码,很简单,明白上述结构后, ...
- c语言程序设计第4周编程练习(素数和)
1 素数和(5分) 题目内容: 我们认为2是第一个素数,3是第二个素数,5是第三个素数,依次类推. 现在,给定两个整数n和m,0<n<=m<=200,你的程序要计算第n个素数到第m个 ...
- 1013团队Beta冲刺day5
项目进展 李明皇 今天解决的进度 服务器端还未完善,所以无法进行联动调试.对页面样式和逻辑进行优化 明天安排 前后端联动调试 林翔 今天解决的进度 完成维护登录态,实现图片上传,微信开发工具上传图片不 ...