微信小程序使用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为数字添加逗号并格式化数字的代码
Aug 23 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
微信小程序提交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版(4)
2006/10/09 PHP
php 各种应用乱码问题的解决方法
2010/05/09 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python数据库操作常用功能使用详解(创建表/插入数据/获取数据)
2013/12/06 Python
python实现超简单端口转发的方法
2015/03/13 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
python实现图片插入文字
2019/11/26 Python
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
新闻专业个人求职信
2013/12/19 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
给校长的建议书
2014/03/12 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
店铺转让协议书
2015/01/29 职场文书
企业员工辞职信范文
2015/05/12 职场文书