zoukankan      html  css  js  c++  java
  • 微信小程序 动态修改数组数据方法

    数据demo:

    tabListLocal: [ // typeLocal主要是和后台数据进行对应匹配
          { currentTab: 0, title: '全部',   typeLocal:0,  total: 0, modelCode:'allReports',list:[] },
          { currentTab: 1, title: '待分配', typeLocal: 7, total: 0, modelCode: 'tobeAssign', list: [] },
          { currentTab: 2, title: '待接单', typeLocal: 8, total: 0, modelCode: 'tobeAccept', list: [] },
          { currentTab: 3, title: '待处理', typeLocal: 9, total: 0, modelCode: 'tobeHandle', list: [] },
          { currentTab: 4, title: '待评论', typeLocal: 10, total: 0, modelCode: 'tobeAssess', list: []}],

    由于list的数据是动态的,需要接口查询返回,因此需要遍历数据,并动态修改数据。

    根据不同的状态去遍历查询该状态下的数据列表,把返回的接口数据赋值到list属性。

     this.data.myWorkOrderList.forEach((item,index) =>{
          getRepairOrderList(item.typeLocal).then(rsp => {
            if (rsp.status === 200) {
              this.setData({
                [`myWorkOrderList[${index}].list`] : rsp.data
              })
            }
          })
        })

    动态赋值方法有2种:

    方式一:使用es6语法

    [`myWorkOrderList[${index}].list`] : rsp.data

    方式二:整体赋值

      大概意思就是,先修改值,再重新setData一次让其生效。

     // 清空上传的图片
      clearImg(e) {
        const index = e.currentTarget.dataset.index
        // 使用整体赋值的方法进行修改
        this.data.repairImageAry.splice(index, 1); 
        this.setData({
          repairImageAry: this.data.repairImageAry
        })
      },
    

      

  • 相关阅读:
    软件体系架构阅读笔记(六)
    软件体系架构阅读笔记(五)
    软件体系架构阅读笔记(四)
    软件体系架构阅读笔记(三)
    软件体系架构阅读笔记(二)
    软件体系架构阅读笔记(一)
    问题账户需求分析
    2018年春季个人阅读计划
    阅读《我们怎样做软件需求分析》有感
    1.5:设计模式
  • 原文地址:https://www.cnblogs.com/luoxuemei/p/12767610.html
Copyright © 2011-2022 走看看