当前位置: 首页 > 编程笔记 >

微信小程序使用setData修改数组中单个对象的方法分析

晁文斌
2023-03-14
本文向大家介绍微信小程序使用setData修改数组中单个对象的方法分析,包括了微信小程序使用setData修改数组中单个对象的方法分析的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了微信小程序使用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 () {})
}

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

希望本文所述对大家微信小程序开发有所帮助。

 类似资料:
  • 本文向大家介绍微信小程序日历组件使用方法详解,包括了微信小程序日历组件使用方法详解的使用技巧和注意事项,需要的朋友参考一下 这个日历采用小程序组件化开发,有兴趣的同学可以引用本组件(怎么引用不多赘述,自行去微信小程序开发api了解) wxml js wxss 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍activemq整合springboot使用方法(个人微信小程序用),包括了activemq整合springboot使用方法(个人微信小程序用)的使用技巧和注意事项,需要的朋友参考一下 主题 ActiveMQ Spring Boot 小程序开发 1.引入依赖 2.修改配置文件(其实配置也是默认值,不配置也可以) 3.添加ActiveMq连接池(如果不开启连接池,则每发送一条数据创建一

  • 本文向大家介绍微信小程序下拉框组件使用方法详解,包括了微信小程序下拉框组件使用方法详解的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下 适用场景 1、省市三级联动 2、出生日期选择 3、性别选择 4、一般性的下拉选择等 一、省市三级联动使用 注意mode = region,以及value = “一维数组” 二、出生日期选择 注意

  • 1. 概要说明 ​ 微信小程序客服消息对接是指微信客户通过小程序客服功能或H5页面发起咨询,消息发送到小能,由小能客服接待来自微信小程序的会话。 ​ 目前小能支持三种方式对接:微信小程序极速模式、微信小程序开发模式、H5嵌入模式。客户一般选择一种方式即可,推荐使用第一种。 3. 小程序集成方式 极速模式 开发模式 H5单页模式 小程序深度对接 微信信息查看与设置

  • 本文向大家介绍小程序调用微信支付的方法,包括了小程序调用微信支付的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了小程序调用微信支付的具体代码,供大家参考,具体内容如下 首先调用小程序wx.login登录接口  获取用户code 将code作为参数  传给后端  调用后端接口wechat/pay/prepay 获取后端  这五个返回值 nonceStr  package2 pay

  • 本文向大家介绍微信小程序中单位rpx和rem的使用,包括了微信小程序中单位rpx和rem的使用的使用技巧和注意事项,需要的朋友参考一下 前言 这篇文章主要给大家讲解了rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起      微信小程序官方文档      >web app变革之rem      >rpx单位官方文档      >rpx单位基础介绍 如果看完上面几篇文章,我们开始进