简介
在微信小程序项目中,需要点击页面遍历出的某一个元素,更换其图标。经过踩坑,发现了关键点,与大家分享一下。
具体实现
// 定义的数组
data: {
arrayData: [
{ keyID: "1", name: "大娃", sex: 1, birth: "2019-10-10", info: { like: "苹果", goodAt: "LOL" } },
{ keyID: "2", name: "二娃", sex: 0, birth: "2019-10-10", info: { like: "香蕉", goodAt: "DNF" } },
{ keyID: "3", name: "三娃", sex: 1, birth: "2019-10-10", info: { like: "樱桃", goodAt: "CF" } }
]
}
一般情况下,我们会这样写:
// 需要在遍历出的对象处添加 bindtap 事件,并 data-index 绑定 index ( wx:for 自带就有的 index,不用特别声明)
clickedFun:function(e) {
let that = this;
let indexs = e.currentTarget.dataset.index;
that.setData({
arrayData[indexs].info.goodAt: "跑步"
});
}
发现这样并不能达到想要的效果!!!
小程序中正确的写法如下:
// 需要在遍历出的对象处添加 bindtap 事件,并 data-index 绑定 index ( wx:for 自带就有的 index,不用特别声明)
clickedFun:function(e) {
let that = this;
let indexs = e.currentTarget.dataset.index;
that.setData({
["arrayData[" + indexs + "].info.goodAt: "跑步"]
});
}
至于setData的具体规则,就请大家去查看小程序官方文档介绍了。
最后
觉得有用的朋友请用你的金手指点一下赞,或者评论留言一起探讨技术!