最近学习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. nginx配置防盗链

    location ~* \.(gif|jpg|swf|flv|mp3|mp4|zip|rar)$ { root /home/soft; valid_referers *.qinyj.top downl ...

  2. shiro权限框架(三)

    三.身份验证 身份验证,即在应用中谁能证明他就是他本人.一般提供如他们的身份 ID 一些标识信息来表明他就是他本人,如提供身份证,用户名/密码来证明 在 shiro 中,用户需要提供 principa ...

  3. android scrollview 属性

     理论部分1.ScrollView和HorizontalScrollView是为控件或者布局添加滚动条2.上述两个控件只能有一个孩子,但是它并不是传统意义上的容器3.上述两个控件可以互相嵌套4.滚动条 ...

  4. 两种设计模式和XML解析

    两种设计模式 1.单例模式 模式的保证步骤:单例(是说在一个类中只能有一个对象)三条件 1.1类构造设置私有  private  Play() { } 1.2 定义一个私有的静态的  类类型  变量 ...

  5. Django+xadmin打造在线教育平台(十)

    十四.xadmin的进阶开发 14.1.权限管理 (1)用户权限 超级用户拥有所有权限,其它添加的用户默认没有任何权限 进后台添加一个用户“Editor1”,勾上“职员状态”后,这个用户才可以登录进后 ...

  6. python web——Django架构

    环境:windows/linux/OS 需要的软件:Firefox 浏览器(别的也可以 不过firfox和python的webdriver兼容性好) git版本控制系统(使用前要配置 用户 编辑器可以 ...

  7. 201621123040《Java程序设计》第4周学习总结

    1.本周学习总结 1.1写出你认为本周学习中比较重要的知识点关键词 关键词:继承 多态性 基本语法 重新定义Override 1.2尝试使用思维导图将这些关键词组织起来.注:思维导图一般不需要出现过多 ...

  8. 201621123057 《Java程序设计》第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截图你的表设计. 答 ...

  9. nyoj 复杂度

    复杂度 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 for(i=1;i<=n;i++) for(j=i+1;j<=n;j++) for(k=j+1;k ...

  10. JAVA_SE基础——48.多态

    面向对象程序设计的三个特点是封装.继承和多态.前面已经学习了前两个特点.本章节将介绍多态性. 多态:一个对象具备多种形态.(父类的引用类型变量指向了子类的对象)或者是接口 的引用类型变量指向了接口实现 ...