微信小程序使用data-*向事件内存储对象,js中取出对应值时显示未定义

问题描述:微信小程序使用data-*向事件内存储对象,js中取出对应值时显示未定义.

wxml

 <text class="authorName db" catchtap="toListDetail" data-videoId="{{item.id}}">{{item.teacher}}</text>

js

 toListDetail:function (event) {
        let videoId = event.target.dataset.videoId;
        console.log(videoId);//undefined
    }

#问题出现原因:
data-*书写方式： 以data-开头，多个单词由连字符-链接，连字符转成驼峰,不能有大写,大写会自动转成小写;

• 如data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。
• 如data-videoId，最终在 event.currentTarget.dataset 中大写会自动转成小写 videoid。
  | wxml | event.currentTarget.dataset |
  | ------------ | ------------ |
  | data-element-type | elementType |
  | data-videoId | videoid |

问题解决办法:

• 在组件中使用data-*定义数据，注意字母大小写.
• 需要使用驼峰命名的时候,以连字符拼接.

---

更为清爽的浏览体验,请移步我的个人博客
天心天地生的个人博客