微信小程序——this.setData()动态修改数组中的某一值

微信小程序——this.setData()动态修改数组中的某一值L8m无知

大家是不是都觉得微信小程序的开发方式和 vue react 这种框架的开发方式很像？L8m无知

当操作一个列表时，有时候只需要修改某一行中某一列的值，这时如果对整个列表进行更新也可以，只是觉得这样太不地道，影响性能，所以就需要只更新数组中的某一值。L8m无知

L8m无知

L8m无知

列表数据 assetListL8m无知

1 2 3 4 5 6 7 8 9 10 11 12

/**    * 页面的初始数据    */   data: {     assetList: [       { id: 1, assetName: '图书', num: 16, unit: '本', worth: 1.00, sltNum:0 },       { id: 2, assetName: '电脑', num: 10, unit: '台', worth: 1.00, sltNum: 0 },       { id: 3, assetName: '手机', num: 15, unit: '个', worth: 1.00, sltNum: 0 },       { id: 4, assetName: '笔', num: 19, unit: '个', worth: 1.00, sltNum: 0 },       { id: 5, assetName: '本', num: 6, unit: '本', worth: 1.00, sltNum: 0 },       ],   },

wxml代码
L8m无知

1 2 3 4 5 6 7 8 9

<view wx:for="{{assetList}}" wx:key="id" class="section">     <view bindtap="setCount" data-id='{{item.id}}'>       <label class="llabel">{{item.assetName}}</label>       <label class="llabel">{{item.num}}{{item.unit}}</label>       <button class="btnadd" data-id='{{item.id}}' data-idx="{{index}}" catchtap="btnDel">-</button>       <input class="ipt" value="{{item.sltNum}}"></input>       <button class="btnadd" data-id='{{item.id}}' data-idx="{{index}}" catchtap="btnAdd">+</button>     </view>   </view>

相关事件处理代码
L8m无知

1 2 3 4 5 6 7 8 9 10 11 12 13 14

btnAdd: function (e) {     let itm = this.data.assetList[e.target.dataset.idx];     if (itm) {       itm.sltNum += 1;       if (itm.sltNum > itm.num) {         itm.sltNum = itm.num;       }       let temp = 'assetList[' + e.target.dataset.idx + '].sltNum';       console.log(temp);       this.setData({         [temp]: itm.sltNum, //注意 temp 需要用中括号括起来       })     }   },

关键代码：
L8m无知

1 2	let temp = 'assetList[' + e.target.dataset.idx + '].sltNum'; [temp]: itm.sltNum, //注意 temp 需要用中括号括起来

temp的值打印出来类似：assetList[0].sltNum，中括号中的数字为具体的索引，通过 e.target.dataset.idx 获得。L8m无知

注意 temp 需要用中括号括起来，这一点很重要，否则不生效。L8m无知

本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/collection/miniprogram/issue/2019-10-12/251.html

很赞哦！ (37) 赏 有话说 (0)