微信小程序e.currentTarget.dataset获取不到数据的问题

最新推荐文章于 2023-06-04 19:53:17 发布

Flyingheart1991

最新推荐文章于 2023-06-04 19:53:17 发布

阅读量5k

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/Flyingheart1991/article/details/119701794

版权

微信小程序专栏收录该内容

1 篇文章

订阅专栏

在开发微信小程序时，遇到一个关于抽屉组件的问题，即在使用bindtap事件绑定data-personInfo传递数据时，由于WXML中大写变量名在JS中会自动转为小写，导致无法正确获取数据。通过分析e.currentTarget.dataset，发现personInfo字段变为personinfo，因此修改data-name中的name字段为全小写，成功解决了变量名匹配问题，从而能正确获取并使用点击事件的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

最近写一个微信小程序，使用抽屉组件，需要获取点击事件数据

问题描述：

bindtap=“showModal1” data-target=“Modal” data-personInfo="{{drawerPeople[index]}}"使用e.currentTarget.dataset.personInfo怎么都获取不到数据，找不到原因

<!-- 抽屉 人员列表-->
<view class="cu-modal drawer-modal justify-start {{modalName=='DrawerModalL'?'show':''}}" bindtap="hideModal">
  <view class="cu-dialog basis-lg" catchtap style="top:{{CustomBar}}px;height:calc(100vh - {{CustomBar}}px)">
    <scroll-view class="scrollList" scroll-y style="height:calc(100vh - {{CustomBar}}px)">
      <view class="cu-list menu text-left">
        <view class="cu-item arrow" wx:for="{{drawerPeople}}" wx:key="index" bindtap="showModal1" data-target="Modal" data-personInfo="{{drawerPeople[index]}}">
          <view class="content">
            <text class="cuIcon-github text-grey"></text>
            <text class="text-grey">{{item.personName}}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</view>
<!-- 抽屉 人员列表-->

原因分析：

通过console.log(e)发现e.currentTarget.dataset.personInfo中personInfo变成了personinfo,大写变小写了，变量名改变导致无法获取变量数据，由此猜测这里变量名只能采用全小写命名，“date-name”中name字段名称不能用大写，从wxml传给js的时候，大写变量名自动变全小写，导致获取不到变量数据。


<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">
{type: "tap", timeStamp: 35913, target: {…}, currentTarget: {…}, mark: {…}, …}
changedTouches: [{…}]
currentTarget:
dataset:
personinfo: {_id: "", …}
target: "Modal"
__proto__: Object
id: ""
offsetLeft: 0
offsetTop: 210