微信小程序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.rhkb.cn/news/90295.html

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

相关文章

windows程序基础

一、windows程序基础 1. Windows程序的特点 1&#xff09;用户界面统一、友好 2&#xff09;支持多任务:允许用户同时运行多个应用程序(窗口) 3&#xff09;独立于设备的图形操作 使用图形设备接口( GDI, Graphics Device Interface )屏蔽了不同硬件设备的差异&#…

Elasticsearch - 闲聊ElasticSearch中的分页

文章目录 概述分页方案from-size内部执行过程【Query】阶段【fetch】阶段潜在问题注意事项 深度分页Scroll &#xff08;Scroll遍历数据&#xff09;Scroll ScanSliced ScrollSearch After基于pit机制的search after 小结 概述 ElasticSearch是一款强大的搜索引擎&#xff0c;…

Spring kafka源码分析——消息是如何消费的

文章目录 概要端点注册创建监听容器启动监听容器消息拉取与消费小结 概要 本文主要从Spring Kafka的源码来分析&#xff0c;消费端消费流程&#xff1b;从spring容器启动到消息被拉取下来&#xff0c;再到执行客户端自定义的消费逻辑&#xff0c;大致概括为以下4个部分&#x…

flutter-第三方组件

卡片折叠 stacked_card_carousel 扫一扫组件 qr_code_scanner 权限处理组件 permission_handler 生成二维码组件 pretty_qr_code 角标组件 badges 动画组件 animations app更新 app_installer 带缓存的图片组件 cached_network_image 密码输入框 collection 图片保存 image_g…

数据分析两件套ClickHouse+Metabase(一)

ClickHouse篇 安装ClickHouse ClickHouse有中文文档, 安装简单 -> 文档 官方提供了四种包的安装方式, deb/rpm/tgz/docker, 自行选择适合自己操作系统的安装方式 这里我们选deb的方式, 其他方式看文档 sudo apt-get install -y apt-transport-https ca-certificates dirm…

SpringBoot复习:(44)MyBatisAutoConfiguration

可以看到MyBatisAutoConfiguration引入了MyBatisProperties这个属性&#xff1a; MyBatisAutoConfiguration中配置了一个SqlSessionFactoryBean,代码如下&#xff1a; 可以配置mybatis-config.xml,需要配置文件里指定&#xff1a; mybatis.config-locationclasspath:/mybat…

2023年京东宠物食品行业数据分析(京东大数据)

宠物食品市场需求主要来自于养宠规模&#xff0c;近年来由于我国宠物数量及养宠人群的规模均在不断扩大&#xff0c;宠物相关产业和市场规模也在蓬勃发展&#xff0c;宠物食品市场也同样保持正向增长。 根据鲸参谋电商数据分析平台的相关数据显示&#xff0c;2023年1月-7月&am…

python单元测试框架(测试固件、批量执行)

python测试框架 在Python语言中应用最广泛的单元测试框架是unittest和pytest,unittest属于标准库&#xff0c;只要安装了Python解释器后就可以直接导入使用了,pytest是第三方的库&#xff0c;需要单独的安装。 1.白盒测试原理 在软件架构的层面来说&#xff0c;测试最核心的步…

红日ATT&CK VulnStack靶场(三)

网络拓扑 web阶段 1.扫描DMZ机器端口 2.进行ssh和3306爆破无果后访问web服务 3.已知目标是Joomla&#xff0c;扫描目录 4.有用的目录分别为1.php 5.configuration.php~中泄露了数据库密码 6.administrator为后台登录地址 7.直接连接mysql 8.找到管理员表&#xff0c;密码加密了…

“多测合一”生产软件-不动产测量(不动产权籍调查测绘软件RESS),房地一体化测量由请湖南来示范

湖南“多测合一”生产软件-不动产测量软件&#xff0c;提取码&#xff1a;RESShttps://pan.baidu.com/s/1OqakLJICIP6buNiZ6j9Npw?pwdRESS 2020年7 月&#xff0c;国务院办公厅印发《 国务院办公厅关于进一步优化营商环境 更好服务市场主体的实施意见》 &#xff08;国办发〔 …

【网络】高级IO

目录 一、五种IO模型 1、阻塞IO 2、非阻塞IO 3、信号驱动 4、IO多路转接 5、异步IO 6、总结 二、高级IO重要概念 1、同步通信与异步通信 2、阻塞 vs 非阻塞 三、非阻塞IO 1、fcntl 2、实现函数SetNoBlock 四、IO多路转接select 1、select 1.1、参数解释 1.2、…

Unity实现异步加载场景

一&#xff1a;创建UGUI 首先我们在LoginCanvas登入面板下面创建一个Panel,取名为LoadScreen,再在loadScreen下面创建一个Image组件&#xff0c;放置背景图片&#xff0c;然后我们再在lpadScreen下面继续创建一个Slider,这个是用来加载进度条的&#xff0c;我们改名为LoadSlid…

简单入门seleniumUI自动化测试

目录 一、selenium的介绍 二、selenium的原理 三、selenium的八种元素定位的方法 1、ID定位&#xff1a; 2 、name定位&#xff1a; 3、class定位&#xff1a; 4、tag定位&#xff1a; 5、link_text定位&#xff1a; 6、partial_link_text定位&#xff1a; 7、css定位…

航顺HK32F030M怎么样 航顺HK32F030M应用领域介绍

航顺HK32F030M是一款基于ARM Cortex-M0内核的32位微控制器&#xff0c;具有高性能、低功耗、经济适用等特点。以下是颖特新关于航顺HK32F030M的详细介绍&#xff1a; 一、性能表现 航顺HK32F030M采用ARM Cortex-M0内核&#xff0c;主频最高可达64MHz&#xff0c;具有出色的计算…

反编译微信小程序,可导出uniapp或taro项目

微信小程序反编译&#xff08;全网通用&#xff09; 微信小程序反编译 反编译主要分为四个阶段 操作流程 1. node.js安装 2. node安装模块 3. 开始反编译 4. 导入到微信开发者工具既可运行 微信小程序反编译 当碰到不会写的小程序功能时&#xff0c;正好看到隔壁小程序有类似…

FPGA应用学习笔记--时钟域的控制 亚稳态的解决

时钟域就是同一个时钟的区域&#xff0c;体现在laways语句边缘触发语句中&#xff0c;设计规模增大就会导致时钟不同步&#xff0c;有时差&#xff0c;就要设计多时钟域。 会经过与门的延时产生的新时钟域&#xff0c;这种其实不推荐使用&#xff0c;但在ascl里面很常见 在处理…

2023国赛数学建模C题思路分析

文章目录 0 赛题思路1 竞赛信息2 竞赛时间3 建模常见问题类型3.1 分类问题3.2 优化问题3.3 预测问题3.4 评价问题 4 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 竞赛信息 全国大学生数学建模…

SpringCloud实用篇5——elasticsearch基础

目录 1.初识elasticsearch1.1 了解ES1.1.1 elasticsearch的作用1.1.2 ELK技术栈1.1.3 elasticsearch和lucene1.1.4 总结 1.2.倒排索引1.2.1.正向索引1.2.2.倒排索引1.2.3.正向和倒排 1.3 es的一些概念1.3.1 文档和字段1.3.2 索引和映射1.3.3 mysql与elasticsearch 1.4 部署单点…

单模光纤模场强度分布以及高斯近似的MATLAB仿真

已知纤芯半径5um&#xff0c;数值孔径NA 0.1&#xff0c;波长 用波长和数值孔径计算归一化常数V 之前我们在单模光纤特征方程及其MATLAB数值求解中&#xff0c;用线性关系拟合过V和W&#xff0c;这里直接用拟合结果 U用V和W计算 clc clear close alla 5e-6;%纤芯半径 NA …

Stable Diffusion + AnimateDiff运用

1.安装AnimateDiff&#xff0c;重启webui 2.下载对应的模型&#xff0c;最好到c站下载&#xff0c;google colab的资源有可能会出现下载问题 https://civitai.com/models/108836 3.下载完成后&#xff0c;你可以随便抽卡了。 抽卡完成后固定seed&#xff0c;然后打开这个插件&…