微信小程序——this.setData()动态修改数组中的某一值S8v编程技术_踩坑日志_进阶指南_无知人生

大家是不是都觉得微信小程序的开发方式和 vue react 这种框架的开发方式很像？S8v编程技术_踩坑日志_进阶指南_无知人生

当操作一个列表时，有时候只需要修改某一行中某一列的值，这时如果对整个列表进行更新也可以，只是觉得这样太不地道，影响性能，所以就需要只更新数组中的某一值。S8v编程技术_踩坑日志_进阶指南_无知人生

S8v编程技术_踩坑日志_进阶指南_无知人生

S8v编程技术_踩坑日志_进阶指南_无知人生

列表数据 assetListS8v编程技术_踩坑日志_进阶指南_无知人生/**

* 页面的初始数据

*/

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代码

S8v编程技术_踩坑日志_进阶指南_无知人生

{{item.assetName}}

{{item.num}}{{item.unit}}

-

+

相关事件处理代码

S8v编程技术_踩坑日志_进阶指南_无知人生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 需要用中括号括起来

})

}

},

关键代码：

S8v编程技术_踩坑日志_进阶指南_无知人生let temp = 'assetList[' + e.target.dataset.idx + '].sltNum';

[temp]: itm.sltNum, //注意 temp 需要用中括号括起来

temp的值打印出来类似：assetList[0].sltNum，中括号中的数字为具体的索引，通过 e.target.dataset.idx 获得。S8v编程技术_踩坑日志_进阶指南_无知人生

注意 temp 需要用中括号括起来，这一点很重要，否则不生效。S8v编程技术_踩坑日志_进阶指南_无知人生

本文由 微wx笑 创作，采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改，但需署名作者且注明出处。