微信小程序data-item设置获取不到数据的问题

这篇具有很好参考价值的文章主要介绍了微信小程序data-item设置获取不到数据的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序data-item设置获取不到数据的问题

简单说明:
在微信小程序中,通过列表渲染使用wx:for根据数组中的每一项重复渲染组件。同时使用bindtap给每一项绑定点击事件clickItem,再通过data-item绑定数据。
**问题:**通过data-item绑定的数据,在点击事件中获取不到。

问题示例:

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" bindtap="clickItem" data-item="{{ itemName}}">
  {{idx}}: {{itemName.message}}
</view>

在js文件中,通过clickItem函数的event对象获取不到绑定的itemName数据

clickItem: function (e) {
   console.log(e.currentTarget.dataset.itemName)
}

可能原因:

wx:for-item设置当前元素变量名不要使用驼峰命名,用全小写,不然渲染正常,但是data-item设置会获取不到。因为它找不到,所以到函数event对象里面就没有itemName。

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemname" bindtap="clickItem" data-item="{{ itemname}}">
  {{idx}}: {{itemname.message}}
</view>

clickItem: function (e) {
   console.log(e.currentTarget.dataset.itemname)
}

原因:
wx:for-item设置当前元素变量名时,允许驼峰命名且不会自动将大写字母转为小写字母。而以data-开头自定义组件数据时,命名会将连字符转换成驼峰,大写字母转成小写字母。

意思就是,wx:for-item中命名的itemName在data-item中会被自动转换成itemname,就变成两个东西,所以是获取不到的,因此最好统一用小写,或者在data-item中使用“item-name”

官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html#%E4%BA%8B%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F
在dataset说明部分有命名的相关说明。

微信小程序data-item设置获取不到数据的问题,微信小程序,小程序,前端

**

补充介绍:

**
wx-for的注意事项:
当 wx:for 的值为字符串时,会将字符串解析成字符串数组:

<view wx:for="array">
  {{item}}
</view>

等同于

<view wx:for="{{['a','r','r','a','y']}}">
  {{item}}
</view>

注意: 花括号和引号之间如果有空格,将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}" >
  {{item}}
</view>

另外:花括号内,花括号与变量之间允许存在空格

官方文档:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

end

如果对你有帮助,记得点赞噢(~~)文章来源地址https://www.toymoban.com/news/detail-655460.html

到了这里,关于微信小程序data-item设置获取不到数据的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包