微信小程序---获取并更新data中二维数组的值


前言

之前的微信点餐平台依然在缓慢的开发着,之前初步完成了购物车界面。后面在补充业务逻辑功能的时候由于自己之前没有小程序开发经验遇到了一些小小的问题特此记录下。

场景

在这里插入图片描述

这里要新增购物车基础功能,首先说明下菜单数据格式。我后端返回的是一个二维数组,一维最外层放置的是根据菜单分类的对象如人气TOP10,无肉不欢等。分类对象中用第二维数组对象存放具体分类对应的菜品信息。下面是我刚开始写死的假数据用来进行下面的演示:
在这里插入图片描述
通过使用data-形式把我们需要的值传入点击事件对象,函数里通过点击事件对象拿到新增按钮对应的数组索引跟对象。

一、点击事件传值

从图中我们可以看到在点击事件参数中绑定了二维数组的两个索引值super_index与goods_index
在这里插入图片描述
在这里插入图片描述
这样我们就能通过事件对象拿到两层数组分别对应的索引值了,下面是简单的伪代码实现。我们通过字符创拼装的形式构建出需要操作的data具体值对象地址。点击新增按钮后商品购物车数值和总价改变。

addGoods(e) {
    var goal = 'menuArr[' + e.currentTarget.dataset.superindex + '].subArr[' + e.currentTarget.dataset.goodsindex + ']'
    let isSelected = goal + '.isSelected'
    let number = goal + '.number'
    console.log(this.data.localShopping.totalPrice)
    let price = this.data.localShopping.totalPrice + e.currentTarget.dataset.goods.price
    this.setData({
      [isSelected]: true,
      [number]: 1,
      localShopping: {
        totalPrice : price
      }
    })
  }

在这里插入图片描述

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值