最近学习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. 数据管理 - 每天5分钟玩转 Docker 容器技术(147)

    本章将讨论 Kubernetes 如何管理存储资源. 首先我们会学习 Volume,以及 Kubernetes 如何通过 Volume 为集群中的容器提供存储:然后我们会实践几种常用的 Volume ...

  2. Android实用代码七段(三)

    正文  一.获取已经安装APK的路径 PackageManager pm = getPackageManager(); for (ApplicationInfo app : pm.getInstall ...

  3. 用java理解程序逻辑小结

    1.Java常见的注释有哪些,语法是怎样的? 1)单行注释用//表示,编译器看到//会忽略该行//后的所文本 2)多行注释/* */表示,编译器看到/*时会搜索接下来的*/,忽略掉/* */之间的文本 ...

  4. centos 安装atom 笔记

    一.安装atom  "To install Atom on Linux, you can download a Debian package or RPM package either fr ...

  5. Struts2学习笔记二 配置详解

    Struts2执行流程 1.简单执行流程,如下所示: 在浏览器输入请求地址,首先会被过滤器处理,然后查找主配置文件,然后根据地址栏中输入的/hello去每个package中查找为/hello的name ...

  6. Docker深入浅出系列教程——Docker简介

    我是架构师张飞洪,钻进浩瀚代码,十年有余,人不堪其累,吾不改其乐.如果你和我的看法不一样,请关注我的头条号,我们一起奇闻共赏,疑义相析. 本节属于入门简介,从三个小方面进行简单介绍Docker. Do ...

  7. JavaScript(第二十三天)【事件入门】

    JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操作的时候,再去执行一系列代码.   一.事件介绍 事件一般是用于浏览器和用户操作进行交互.最早是IE和 ...

  8. djangoueditor 集成xadmin

    1.安装Python3兼容版本 https://github.com/twz915/DjangoUeditor3/ 2.model加入字段 from DjangoUeditor.models impo ...

  9. 开启Linux的share

    1.挂载Install  Vmare Tool 2.解压VMwareTools.tar.gz 3.安装share目录 4.shared Folders Enabled 添加共享的目录. 在自己的Unb ...

  10. Css之导航栏学习

    Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...