微信小程序使用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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
canvas绘制七巧板
Feb 03 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 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
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
wxPython学习之主框架实例
2014/09/28 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
python操作文件的参数整理
2019/06/11 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
采购员的工作职责
2013/12/26 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
校园广播稿精选
2014/10/01 职场文书
社区党建工作总结2015
2015/05/13 职场文书
暂住证明怎么写
2015/06/19 职场文书
高中化学教学反思
2016/02/22 职场文书
php去除deprecated的实例方法
2021/11/17 PHP