微信小程序使用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中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
Sort()函数的多种用法
Mar 20 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
js实现二级导航功能
2017/03/03 Javascript
js中的面向对象入门
2017/03/06 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
Django框架模板的使用方法示例
2019/05/25 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
python自定义函数def的应用详解
2020/06/03 Python
django有哪些好处和优点
2020/09/01 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
介绍一下javax.servlet.Servlet接口及其主要方法
2015/11/30 面试题
年度考核自我评价
2014/01/25 职场文书
上班看电影检讨书
2014/02/12 职场文书
委托书范文
2014/04/02 职场文书
银行求职自荐信范文
2015/03/04 职场文书
公司聚餐通知
2015/04/22 职场文书
从事会计工作年限证明
2015/06/23 职场文书