微信小程序使用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 相关文章推荐
用JS剩余字数计算的代码
Jul 03 Javascript
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
Mar 01 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 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/08/02 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
google地图的路线实现代码
2009/08/20 Javascript
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
Python入门篇之函数
2014/10/20 Python
python计算一个序列的平均值的方法
2015/07/11 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
Python装饰器简单用法实例小结
2018/12/03 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
python多线程分块读取文件
2019/08/29 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
python flask搭建web应用教程
2019/11/19 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
Python通过字典映射函数实现switch
2020/11/06 Python
工作失误检讨书范文大全
2014/01/13 职场文书
称象教学反思
2014/02/03 职场文书
财务部绩效考核方案
2014/05/04 职场文书
义和团口号
2014/06/17 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android