微信小程序data-XXX传参问题

微信小程序data-XXX传参问题

今日利用bindtap 及data-XXX进行传递两个参数时，出现一个问题，总是传不过去参数。 最后用重命名的方法解决了，就是data-XXX中XXX不能有大写字母。

1、场景还原

下面为源代码：

WXML：

<view bindtap="clockIn"  id="{{item.id}}" 
data-workerId="{{item.workerId}}">打卡</view>

js:

//按钮响应：打卡
clockIn: function (e) {
    let missionId = e.currentTarget.id
    let workerId = e.currentTarget.dataset.workerId
    console.log("missionId:"+missionId+",workerId:"+workerId)
},

控制台输出结果：

missionId:1,workerId:undefined

控制台输出总是 workerId未定义

2、解决过程

首先我尝试在wxml中直接显示workerId，看界面是否能显示。
WXML：

<view bindtap="clockIn"  id="{{item.id}}" 
data-workerId="{{item.workerId}}">打卡{{item.workerId}}</view>

界面显示如下，可以看出 “1” 就是workerId,这说明是wxml可以取到workerId的值的，但是就是传递不出去。

然而我又确定我在js中获取数据的方法是正确的。
因为我刚刚用这种方法传递过两个参数，那时是完全没有这种问题的。

突发奇想，我尝试在wxml中重命名workId。
WXML:

<view bindtap="clockIn"  id="{{item.id}}" 
data-index="{{item.workerId}}">打卡</view>

如上方代码所示，我将wxml中第二行的data-workerId换成了data-index。并在js文件中做相应的变动。
JS:

//按钮响应：打卡
clockIn: function (e) {
    let missionId = e.currentTarget.id
    let workerId = e.currentTarget.dataset.index
    console.log("missionId:"+missionId+",workerId:"+workerId)
},

如上方代码所示，我将js中第四行的e.currentTarget.dataset.workerId换成了e.currentTarget.dataset.index。

控制台输出结果：

missionId:1,workerId:1

成功输出了！！！

3、结论

虽然成功输出了，但是我也没有查到具体原因。
我又尝试用workerid重命名workerId，也是成功输出了。

所以我觉得，难道是"workerId"中有大写字母的原因？

然后我又尝试用大写字母I直接替代workerId，这时是输出失败的！

所以我最终的解决方法是：data-XXX中XXX不能有大写字母!!!

注：可能这个结论并不是正确的，但是确实解决了我当前的问题，希望对你有帮助。