还原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> < ...
随机推荐
- 2018.3.29 DIV位置调整代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- Beta冲刺第四天
一.昨天的困难 没有困难. 二.今天进度 1.林洋洋:修复协作详情,日程详情日程类型显示纠正 2.黄腾达:修复管理者查看协作成员可以移除自己的问题,加入登录.注册表单按回车键就可直接完成操作的功能 3 ...
- 使用Python定制词云
一.实验介绍 1.1 实验内容 在互联网时代,人们获取信息的途径多种多样,大量的信息涌入到人们的视线中.如何从浩如烟海的信息中提炼出关键信息,滤除垃圾信息,一直是现代人关注的问题.在这个信息爆炸的时代 ...
- android之SVG制作与应用
文章解析及例子:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0825/3362.html 工具:Photoshop CC+sv ...
- Flask学习 一 基本结构
-from flask import Flask +from flask import Flask,render_template -from flask import request -from f ...
- 织梦cms网上复制图片不可用的解决方法
背景描述: 织梦cms采集图片集时, 需要使用织梦cms提供的"网上复制图片"的功能, 好像我这里这个功能一直不可用, 今天下定决心研究了下源代码并进行了适当修改, 将我的修改提供 ...
- js 时间戳 vue 时间戳的转换 ?
在没有用vue做项目之前 也遇到过戳转换的问题 直接函数 调用 方法 这个也可以写成vue的 把function去掉 formatDate后面加冒号 就可以了 当然这个不是原创 但是是谁的我忘记了 ...
- vue下拉列表
最近在弄作品,做了个下拉列表.心想各位小哥哥.小姐姐可能会用到相同的需求,就把下拉列表封装一下,希望能对各位小哥哥,小姐姐有帮助 github地址:https://github.com/ClmPisc ...
- linux下面的打包压缩命令
tar命令 tar [-cxtzjvfpPN] 文件与目录 ....linux下面压缩之前要把一堆文件打个包再压缩,即使只有一个文件也需要打个包.例子:tar czvf 1.tar.gz hello. ...
- NoSQL简介
相信大家也多多少少了解过一些数据库,最常用的当属MySQL了,当然也这是关系型数据库的代表了 常见的关系型数据库有:MySQL.SQLServer.Oracle 而数据库也有另一个流派-----NoS ...