微信小程序解决按钮点击后e.currentTarget.dataset为空的方法

最新推荐文章于 2024-10-18 17:32:59 发布

Jay_fearless

最新推荐文章于 2024-10-18 17:32:59 发布

阅读量2.5k

点赞数 1

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

本文链接：https://blog.csdn.net/Jay_fearless/article/details/129579650

版权

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

8 篇文章

订阅专栏

当点击按钮返回dataset为空时，可以在WXML的按钮组件中添加data-属性绑定物品编号。在事件处理函数中，可以通过e.currentTarget.dataset.num获取到值，然后利用这个值在数据库中查找并删除相应订单。示例代码展示了如何实现这一过程。

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

1.有时候我们点击按钮后返回的信息是这样的，显示dataset为空，无法获取到真实值：

在这里插入图片描述

这个时候我们要修改wxml里的页面，在按钮中加入data-属性(全部小写)的字段：

<view class="list">
  <view class="list-item" wx:for="{{order}}" wx:key="id">
    <view class="list-item-l">
      <view class="list-item-t">订单号：{{item.number}}</view>
    </view>
    <view class="list-item-l">
      <view class="list-item-t">地址：{{item.loc}}</view>
    </view>
    <view class="list-item-r">
      <view>
		<!--加入了data-num这个字段，它的值是物品的编号item.number -->
        <button class="button-top-bar-delete" bindtap="deletemyorder" data-num='{{item.number}}' wx:if="{{whichorder}}">删除</button>
      </view>
    </view>
  </view>
</view>

这个字段必须是物品在数据库中有的字段：

在这里插入图片描述

之后再次进行点击测试：

在这里插入图片描述

这样就显示出来了！

2.之后就可以根据返回的值去数据库中寻找并删除该订单了：

    deletemyorder: function(e) {
      var num=e.currentTarget.dataset.num
      console.log(e.currentTarget.dataset.num)
	  
	  //数据库中查找该订单号对应的_id号并删除
      ord.where({
        "number":num
      }).get().then(res=>{
        console.log(res)
        this.setData({
          id:res.data[0]._id
        })
        console.log(this.data.id)
        ord.doc(this.data.id).remove()
        console.log("数据删除成功")
      })
    },