微信小程序使用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 相关文章推荐
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
微信小程序canvas动态时钟
Oct 22 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 分页类 扩展代码
2009/06/11 PHP
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
2007/04/20 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
Python进阶-函数默认参数(详解)
2017/05/18 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
使用Python实现牛顿法求极值
2020/02/10 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
2015年食堂工作总结报告
2015/04/23 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
python 爬取豆瓣网页的示例
2021/04/13 Python
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
golang连接MySQl使用sqlx库
2022/04/14 Golang