关于微信小程序dataset踩到的坑:属性全为小写字母
发布于 3 年前 作者 whan 740 次浏览 来自 分享

本文转自

原文链接:https://blog.csdn.net/weixin_42528204/article/details/106094256

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

~

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

1

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

~

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

1

2

3

4

完美的代码,当我满心欢喜的以为能取到值时,结果却给我一个大大的惊喜。

原因

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

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

1

2

3

4

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

关于dataset

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

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

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

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

1

2

官方示例

<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 // 大写会转为小写
  }
})

1

2

3

4

5

6

7

8

结尾

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

回到顶部