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

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

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

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

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

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

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

* 页面的初始数据

*/

data: {

assetList: [

{ id: 1, assetName: &＃39;图书&＃39;, num: 16, unit: &＃39;本&＃39;, worth: 1.00, sltNum:0 },

{ id: 2, assetName: &＃39;电脑&＃39;, num: 10, unit: &＃39;台&＃39;, worth: 1.00, sltNum: 0 },

{ id: 3, assetName: &＃39;手机&＃39;, num: 15, unit: &＃39;个&＃39;, worth: 1.00, sltNum: 0 },

{ id: 4, assetName: &＃39;笔&＃39;, num: 19, unit: &＃39;个&＃39;, worth: 1.00, sltNum: 0 },

{ id: 5, assetName: &＃39;本&＃39;, num: 6, unit: &＃39;本&＃39;, worth: 1.00, sltNum: 0 },

],

},

wxml代码

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

{{item.assetName}}

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

-

&＃43;

相关事件处理代码

S8v编程技术_踩坑日志_进阶指南_无知人生btnAdd: function (e) {

let itm &＃61; this.data.assetList[e.target.dataset.idx];

if (itm) {

itm.sltNum &＃43;&＃61; 1;

if (itm.sltNum > itm.num) {

itm.sltNum &＃61; itm.num;

}

let temp &＃61; &＃39;assetList[&＃39; &＃43; e.target.dataset.idx &＃43; &＃39;].sltNum&＃39;;

console.log(temp);

this.setData({

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

})

}

},

关键代码&＃xff1a;

S8v编程技术_踩坑日志_进阶指南_无知人生let temp &＃61; &＃39;assetList[&＃39; &＃43; e.target.dataset.idx &＃43; &＃39;].sltNum&＃39;;

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

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

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

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