微信小程序使用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 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 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/05/29 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
php图片上传类 附调用方法
2016/05/15 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
JavaScript DOM基础
2015/04/13 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
vue项目中使用百度地图的方法
2018/06/08 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
Python探索之自定义实现线程池
2017/10/27 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
django表单的Widgets使用详解
2019/07/22 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
python实现的自动发送消息功能详解
2019/08/15 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
python IP地址转整数
2020/11/20 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
Python文件操作的面试题
2013/06/22 面试题
预备党员承诺书
2014/03/25 职场文书
考察现实表现材料
2014/05/19 职场文书
食品安全主题班会
2015/08/13 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python