微信小程序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说明部分有命名的相关说明。

在这里插入图片描述

**

补充介绍:

**
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

如果对你有帮助,记得点赞噢(~~)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/37292.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

观察者模式实战

场景 假设创建订单后需要发短信、发邮件等其它的操作&#xff0c;放在业务逻辑会使代码非常臃肿&#xff0c;可以使用观察者模式优化代码 代码实现 自定义一个事件 发送邮件 发送短信 最后再创建订单的业务逻辑进行监听&#xff0c;创建订单 假设后面还需要做其它的…

常见的一些BUG

常见的一些BUG&#xff0c;但实际上在编写代码时&#xff0c;我们应该尽可能避免这些类型的错误&#xff1a; 变量名与函数名冲突&#xff1a; def main(): print("Hello, World!") main 5 print("The value of main is:", main) 函数参数传递错误&…

取个对象值导致系统崩溃

取个对象值导致系统崩溃 前言 想必各位小伙经常在项目中遇到一些错误&#xff0c;取对象值的时候&#xff0c;经常报错,又或者某些项目突然就挂经常都是出现在一些对象取值上面&#xff0c;然后就被领导一顿训斥 报错分析 例如&#xff1a; 下面这个报错大家想必不会陌生&am…

最大交换(力扣)枚举 JAVA

给定一个非负整数&#xff0c;你至多可以交换一次数字中的任意两位。返回你能得到的最大值。 示例 1 : 输入: 2736 输出: 7236 解释: 交换数字2和数字7。 示例 2 : 输入: 9973 输出: 9973 解释: 不需要交换。 注意: 给定数字的范围是 [0, 10^8] 解题思路&#xff1a; 1、数最…

【量化课程】08_2.深度学习量化策略基础实战

文章目录 1. 深度学习简介2. 常用深度学习模型架构2.1 LSTM 介绍2.2 LSTM在股票预测中的应用 3. 模块分类3.1 卷积层3.2 池化层3.3 全连接层3.4 Dropout层 4. 深度学习模型构建5. 策略实现 1. 深度学习简介 深度学习是模拟人脑进行分析学习的神经网络。 2. 常用深度学习模型架…

山东布谷科技直播软件源码Nginx服务器横向扩展:搭建更稳定的平台服务

在直播软件源码平台中&#xff0c;服务器扮演着重要的角色&#xff0c;关系着视频传输、数据处理、用户管理等工作的顺利完成。随着互联网的迅猛发展&#xff0c;直播行业也随之崛起&#xff0c;全世界的人们都加入到了直播软件源码平台中&#xff0c;用户流量的增加让服务器的…

视频高效剪辑,轻松平均分割视频,生成高质量M3U8

您是否在处理视频剪辑时常常面临繁琐的切分工作&#xff1f;是否希望能够快速而精准地平均分割视频&#xff0c;并生成适用于在线播放的高质量m3u8文件&#xff1f;现在&#xff0c;我们的智能视频剪辑大师为您提供了一种简便而高效的解决方案&#xff01;无需复杂操作&#xf…

Leaflet入门,Leaflet如何实现vue双向绑定数据添加到图片标记物到地图上,动态根据vue数据更新到地图上以及鼠标经过标记物显示提示框

前言 本章使用Leaflet的vue2-leaflet或者vue-leaflet插件方式实现vue数据绑定地图数据,实现地图标记物与vue数据的双向联动更新,以及鼠标经过标记物显示提示框功能。 实现效果演示 vue如何使用Leaflet vue2如何使用:《Leaflet入门,如何使用vue2-leaflet实现vue2双向绑定…

HOT97-多数元素

leetcode原题链接&#xff1a;多数元素 题目描述 给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1&#xff1a; 输入&…

基于java的Word自动出题系统设计与实现

摘 要&#xff1a; 学校作为社会之中最大的人才的培养和过度的机构&#xff0c;源源不断的为社会的发展提供者各种各样的人才。它不仅教授学生知识还教授他们一些在社会之中生存的本领和社会之中的道德规范&#xff0c;并且约束他们的行为。在我国现行的教育体系之中&#xff0…

【量化课程】02_3.投资学基础概念

文章目录 1. 投资和投资学的关系1.1 什么是投资&#xff1f;1.2 什么是投资学&#xff1f; 2. 投资学的主要内容2.1 金融市场与投资环境2.1.1 金融资产2.1.2 债券市场的意义2.1.3 金融市场与经济2.1.4 投资过程2.1.5 竞争性的市场2.1.6 市场参与者2.1.7 主要的市场债券市场外汇…

Stable Diffusion 插件开发经验

Stable Diffusion近来大热,但是插件开发的资料少之又少。 这里提供一些插件开发的经验,可供参考。 1.替换启动页。 如果你想要在运行Stable Diffusion的基础上想要一些独有的操作,不想要进行裁剪,直接替换启动页面,那么就需要在webui中进行替换 这里modules.ui.create_ui…

1.4 数据库管理与优化

数据库管理与优化 文章目录 数据库管理与优化1. 数据库概述1.1 数据库的定义和作用1.2 数据库管理系统&#xff08;DBMS&#xff09; 2. 数据库模型2.1 关系型数据库**2.2 非关系型数据库 3. 数据库设计3.1 数据库设计原则3.2 数据库设计步骤 4. 数据库优化4.1 数据库性能优化4…

基于ipad协议的gewe框架进行微信群组管理(二)

友情链接 geweapi.com 点击访问即可。 获取群组详情 小提示&#xff1a; 该接口可以一次查询20个群组查询出来的信息是不带公告的 请求URL&#xff1a; http://域名地址/api/group/detail 请求方式&#xff1a; POST 请求头&#xff1a; Content-Type&#xff1a;applica…

2009年下半年 软件设计师 上午试卷

博主介绍&#xff1a;✌全网粉丝3W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

【Microsoft 支持】【数据库-MySql】当您尝试从大于 5000 的 TCP 端口连接时收到错误 WSAENOBUFS (10055)

​ 一、转载原文 When you try to connect from TCP ports greater than 5000 you receive the error ‘WSAENOBUFS (10055)’ Symptoms If you try to set up TCP connections from ports that are greater than 5000, the local computer responds with the following WSAE…

使用PHP实现实时聊天功能的匿名聊天与加密传输

使用PHP实现实时聊天功能的匿名聊天与加密传输 随着互联网的发展&#xff0c;人与人之间的交流方式也发生了天翻地覆的变化。其中&#xff0c;实时聊天功能成为了一种越来越受欢迎的交流方式。对于很多网站来说&#xff0c;提供匿名聊天功能能够吸引更多的用户参与&#xff0c…

如何使用Spark/Flink等分布式计算引擎做网络入侵检测

如何使用Spark/Flink等分布式计算引擎做网络入侵检测 引言16 Distributed Abnormal Behavior Detection Approach Based on Deep Belief Network and Ensemble SVM Using Spark17 Spark configurations to optimize decision tree classification on UNSW-NB1518 A dynamic spa…

SOLIDWORKS PDM—文件版本的管控

SOLIDWORKS产品数据管理 (PDM) 解决方案可帮助您控制设计数据&#xff0c;并且从本质上改进您的团队就产品开发进行管理和协作的方式。使用 SOLIDWORKS PDM Professional&#xff0c;您的团队能够&#xff1a;1. 安全地存储和索引设计数据以实现快速检索&#xff1b;2. 打消关于…

使用QT可视化设计对话框详细步骤与代码

一、创建对话框基本步骤 创建并初始化子窗口部件把子窗口部件放到布局中设置tab键顺序建立信号-槽之间的连接实现对话框中的自定义槽 首先前面三步在这里是通过ui文件里面直接进行的&#xff0c;剩下两步则是通过代码来实现 二、项目创建详细步骤 创建新项目 为项目命名 为…