微信小程序使用setData修改数组中单个对象的方法分析


Posted in Javascript onDecember 30, 2018

本文实例讲述了微信小程序使用setData修改数组中单个对象的方法。分享给大家供大家参考,具体如下:

微信小程序已经出来挺久的时间了,之前只是在文档上粗略的看了一下,最近稍得空闲,便利用微信小程序平台写一个练手的项目,顺便学习一下小程序开发,感觉大体跟前端开发基本类似,但是因为是在微信的平台上运行,具体还是要根据小程序的规则来编写代码的,其中还是有部分的内容跟前端中常见的有所不同,于是接下来的博客里,也会顺手记录微信小程序开发过程中的一些坑,帮助后来的小程序开发者少踩一些坑,当然我踩的坑大部分都是以前的开发者踩过的,我所做的也仅仅是记录,分享。

习惯使用Vue或者React这类框架的开发者们,肯定不会对修改data内中数组的单个对象而烦恼,因为这些框架已经帮我们很好的处理了这个问题,并且在文档上也写的非常清楚。

比如要求是有一个数组存放了购物车的商品信息,而你在购物车内修改了单个商品的期望购买数量后,我们就要动态的更新这个单个对象的购买数量值,如果在小程序里我们会怎么做呢?

如果你按照Vue的写法来实现的话,不出意外会失败。而微信小程序也只给我们提供了一个setData方法,这个方法是使用键值对的形式对数据进行修改,例如:

this.setData({
  name : 'leon'
})

回到我们刚刚的例子里,这时候,如果你想修改单个商品的数量信息,应该怎么写?

首先展示一种错误的写法:

Page({
 data: {
  array: [{text: 'init data'}],
 },
 changeItemInArray: function (index) {
 this.setData({
 'array['+index+'].text':'changed data'
 })
 }
})

如果这样动态的写index,很显然,这样是无法使用在对象的key中的,我相信小程序的新手开发者可能尝试过这样的写法。

那么正确的写法究竟是怎么样的呢?

changeItemInArray: function (index) {
 // 提前准备好对象
 var item = this.data.list[index]
 item.count = 100
 // 依旧是根据index获取数组中的对象
 var key = "list["+ index + "]"
 this.setData({
 // 这里使用键值对方式赋值
  key: item 
 }, function () {})
}

最后,希望以后的小程序版本更新中,有更好的赋值方法。希望这篇文章能帮助到小程序的新手开发者。

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 Javascript
微信小程序提交form操作示例
Dec 30 #Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 #Javascript
详解vue 兼容IE报错解决方案
Dec 29 #Javascript
玩转Koa之koa-router原理解析
Dec 29 #Javascript
Bootstrap Paginator+PageHelper实现分页效果
Dec 29 #Javascript
玩转Koa之核心原理分析
Dec 29 #Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 #Javascript
You might like
Zend Guard一些常见问题解答
2008/09/11 PHP
php中设置多级目录session的问题
2011/08/08 PHP
一个简单的php路由类
2016/05/29 PHP
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
原生js实现轮播图
2017/02/27 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
在Python下尝试多线程编程
2015/04/28 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
python 编码规范整理
2018/05/05 Python
python实现图片文件批量重命名
2020/03/23 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
汽车工程专业应届生求职信
2013/10/19 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
导游词之永泰公主墓
2019/12/04 职场文书