微信小程序——使用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 () {})
}

最后,希望以后的小程序版本更新中,有更好的赋值方法。希望这篇文章能帮助到小程序的新手开发者。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学自动化测试

新手学习selenium路线图(老司机亲手绘制)

前言: 最近群里有不少小白,想入手selenium,但是一直没找到学习路线,还没入门就迷路了,于是小编亲手绘制了一幅学习路线图。希望能帮助小白快速入门,帮助已经...

3976
来自专栏程序员的知识天地

JavaScript编程趋势:用map和filter替换forEach

当你需要拷贝一个数组的全部或者部分到一个新数组的时候,优先使用map和filter而不是forEach。

1303
来自专栏Golang语言社区

(重载)厚土Go学习笔记 | 04. 导入和导出的不同 用math.Pi来举例

菅俊菠,70后IT人,程序员到产品经理/项目经理,先后涉猎教育、企管、煤矿、电商等多个领域的系统开发和团队管理工作。擅长业务分析、团队管理,关注前沿技术,目前注...

863
来自专栏IMWeb前端团队

Typescript: the Good Parts

本文作者:IMWeb 杨文坚 原文出处:IMWeb社区 未经同意,禁止转载 Typescript: the Good Parts Douglas C...

2009
来自专栏企鹅号快讯

应用广泛的语言ECMAScript 2018来了,新特性都在这里

原文:What’s new in ECMAScript 2018 作者:Paul Krill 翻译:不二 译者注:ECMAScript是应用广泛的语言,它常常被...

2108
来自专栏CDA数据分析师

Python 自然语言处理《釜山行》人物关系

前两天的 R 语言版:R 语言分析《釜山行》人物关系 让很多人都很惊叹,今天小编发糖,给大家送上 Python 版。 本文使用 jieba 库对 《釜山行》中的...

2425
来自专栏落影的专栏

新鲜出炉的iOS面试题

为防止背题,大部分题目不设标准答案,重点考察面试者的基础知识和思维逻辑,答案的提示见后面。

2342
来自专栏ThoughtWorks

后现代的系统编程语言-C++ | TW洞见

C++作为一门经典的编程语言,从上世纪八十年代起至今一直被广泛应用在系统开发和高性能计算领域。近几年来随着各种编程语言和范式的兴起,C++的身影渐渐淡出了人们...

4486
来自专栏web前端教室

《一个陌生同学的留言》-- “老尚,你一定要讲设计模式”

image.png 以前就曾经有人问过我,“老尚,你说是不是有的面试官以虐新人为乐?”,,,我说,“传说中,据说有”,,,他说,“我觉得这应该不是传说。” //...

2038
来自专栏企鹅号快讯

编程语言中间令人无语的规则

我们都知道,软件开发人员每天都在做各种各样的决策:如何更好地实现功能、如何修复bug、如何改进应用程序性能等等。但是他们也在其他人的工作成果中继续自己的决定,例...

3705

扫码关注云+社区

领取腾讯云代金券