关于微信小程序dataset踩到的坑:属性全为小写字母

例:我想在删除时得到商品的id

<button class="cu-btn radius line-gray margin-right" bindtap="deleteTap" data-goodsId="{{order.goodsId}}">删除button>

根据我们习惯的命名方式都是驼峰命名法,所以在设置dataset时,顺手就写了goodsId。

deleteTap(e) {
    var goodsId= e.currentTarget.dataset.goodsId;
    console.log("goodsId",goodsId);
},

完美的代码,当我满心欢喜的以为能取到值时,结果却给我一个大大的惊喜。
关于微信小程序dataset踩到的坑:属性全为小写字母_第1张图片

原因

怎么办呢?,我们知道,dataset的设置,是能在e中取到的,我们可以先将e输出

deleteTap(e) {
    var goodsId= e.currentTarget.dataset.goodsId;
    console.log("e",e);
},

关于微信小程序dataset踩到的坑:属性全为小写字母_第2张图片
WTF???事实告诉我们,dataset中,属性全是小写字母。我觉得事情并不简单,这坑要坑不少人(驼峰命名是个程序员都习惯了吧2333)。但我不服啊,就去翻了翻 官方文档,果然找到了介绍。

关于dataset

在组件节点中可以附加一些自定义数据。这样,在事件中可以获取这些自定义的节点数据,用于事件的逻辑处理。

在 WXML 中,这些自定义数据以 data- 开头,多个单词由连字符 - 连接。这种写法中,连字符写法会转换成驼峰写法,而大写字符会自动转成小写字符。

data-element-type ,最终会呈现为 event.currentTarget.dataset.elementType ;
data-elementType ,最终会呈现为event.currentTarget.dataset.elementtype

官方示例

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test view>

Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})

结尾

官方文档还是顶啊,小声BB(手动滑稽),反正以后注意下吧,全部小写就完事了,驼峰也太麻烦了吧(难顶)。

你可能感兴趣的:(微信小程序,小程序,js)