The problem that the data-item setting of the WeChat applet cannot obtain data
Simple explanation:
In the WeChat applet, wx:for is used to repeatedly render the component according to each item in the array through list rendering. At the same time, use bindtap to bind the click event clickItem to each item, and then bind the data through data-item.
**Problem:** The data bound through data-item cannot be obtained in the click event.
Question example:
<view wx:for="{
{array}}" wx:for-index="idx" wx:for-item="itemName" bindtap="clickItem" data-item="{
{ itemName}}">
{
{
idx}}: {
{
itemName.message}}
</view>
In the js file, the bound itemName data cannot be obtained through the event object of the clickItem function.
clickItem: function (e) {
console.log(e.currentTarget.dataset.itemName)
}
Possible Causes:
When wx:for-item sets the current element variable name, do not use camel case naming, use all lowercase, otherwise the rendering will be normal, but the data-item setting will not be obtained. Because it cannot be found, there is no itemName in the function event object.
<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)
}
Reason:
When wx:for-item sets the variable name of the current element, camel case naming is allowed and uppercase letters will not be automatically converted to lowercase letters. When custom component data starts with data-, the naming will convert hyphens into camel case and uppercase letters into lowercase letters.
This means that the itemName named in wx:for-item will be automatically converted into itemname in data-item and becomes two things, so it cannot be obtained. ThereforeIt is best to use lowercase letters uniformly, or use "item-name" in data-item
官方文档：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说明部分有命名的相关说明。
**
Additional introduction:
**
Note on wx-for:
When the value of wx:for is a string, the string will be parsed into a string array:
<view wx:for="array">
{
{
item}}
</view>
Equivalent to
<view wx:for="{
{['a','r','r','a','y']}}">
{
{
item}}
</view>
Note: If there are spaces between curly braces and quotes, they will eventually be parsed into strings.
<view wx:for="{
{[1,2,3]}} ">
{
{
item}}
</view>
Equivalent to
<view wx:for="{
{[1,2,3] + ' '}}" >
{
{
item}}
</view>
In addition: within the curly braces, spaces are allowed between the curly braces and the variables.
官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html
end
If it is helpful to you, please remember to like it (~~)