微信小程序使用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 相关文章推荐
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
js动态创建标签示例代码
Jun 09 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 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
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
Vue实现日历小插件
2019/06/26 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
Python批量查询域名是否被注册过
2017/06/21 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
聊聊python中的异常嵌套
2020/09/01 Python
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
J2EE面试题集锦(附答案)
2013/08/16 面试题
应聘收银员个人的求职信
2013/11/30 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
师范毕业生求职信
2014/07/11 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
计划生育工作汇报
2014/10/28 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
医德医风自我评价2015
2015/03/03 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
地道战观后感2000字
2015/06/04 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
python中os.path.join()函数实例用法
2021/05/26 Python
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js