微信小程序使用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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
js null undefined 空区别说明
Jun 13 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 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
再说下636单管机
2021/03/02 无线电
php抽奖小程序的实现代码
2013/06/18 PHP
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
Google AJAX 搜索 API实现代码
2010/11/17 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
Vue性能优化的方法
2020/07/30 Javascript
Python实现发送QQ邮件的封装
2017/07/14 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
详解Pycharm出现out of memory的终极解决方法
2020/03/03 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
公司活动方案范文
2014/03/06 职场文书
公务员培的训心得体会
2014/09/01 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
公司聚餐通知
2015/04/22 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
MySQL中的隐藏列的具体查看
2021/09/04 MySQL