微信小程序使用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 函数调用规则
Sep 14 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
极简主义法编写JavaScript类
Nov 02 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
微信小程序提交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中Socket创建与监听实现方法
2015/01/05 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
python 通过SSHTunnelForwarder隧道连接redis的方法
2019/02/19 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
Python内置类型性能分析过程实例
2020/01/29 Python
python实现简单井字棋小游戏
2020/03/05 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
python一些性能分析的技巧
2020/08/30 Python
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
JPA的优势都有哪些
2013/07/04 面试题
如何写贫困证明申请书
2014/10/29 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫