微信小程序使用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简单实现鼠标拖动选择功能
Mar 06 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
js实现鼠标跟随运动效果
Aug 02 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
Vue路由 重定向和别名的区别说明
Sep 09 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
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
php数字游戏 计算24算法
2012/06/10 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
vc6编写python扩展的方法分享
2014/01/17 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
Selenium的使用详解
2018/10/19 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
Appium+python自动化之连接模拟器并启动淘宝APP(超详解)
2019/06/17 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
保险专业大专生求职信
2013/10/26 职场文书
医学院护理专业应届生求职信
2013/11/12 职场文书
小学生美德少年事迹
2014/02/02 职场文书
什么是就业协议书
2014/04/17 职场文书
安全施工责任书
2014/08/25 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
十岁生日答谢词
2015/01/05 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书