微信小程序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
如果对你有帮助,记得点赞噢(~~)
相关文章:
微信小程序data-item设置获取不到数据的问题
微信小程序data-item设置获取不到数据的问题 简单说明: 在微信小程序中,通过列表渲染使用wx:for根据数组中的每一项重复渲染组件。同时使用bindtap给每一项绑定点击事件clickItem,再通过data-item绑定数据。 **问题:**通过data-i…...
创建百度百科需要什么条件?
随着互联网的发展,人们越来越依赖于搜索引擎获取信息。百度作为中国最大的搜索引擎之一,旗下的百科词条已成为人们获取知识的重要来源。创建百度百科需要什么条件呢?接下来伯乐网络传媒就来给大家讲一讲。 首先,你需要有一个百度…...
【springboot启动报错】java: 错误: 无效的源发行版:17
报错截图 解决方案 第一步:编辑配置,改为想用的jdk版本 第二步:文件--->项目结构,改为对应的SDK 第三步:文件--->设置--->构建、执行、部署--->编译器--->Java编译器,修改目标字节码版本 第…...
无涯教程-Perl - setservent函数
描述 在第一次调用getservent之前,应先调用此函数。 STAYOPEN参数是可选的,在大多数系统上未使用。当getservent()检索服务数据库中下一行的信息时,然后setervent设置(或重置)枚举到主机条目集的开头。 语法 以下是此函数的简单语法- setservent STAYOPEN返回值 此函数不返…...
Java创建多线程的最全方法
Java创建多线程的最全方法 一、继承Thread,重写run方法二、实现Runnable接口,重写run方法三、使用匿名内部类创建 Thread 子类对象四、使用匿名内部类,实现Runnable接口五、实现Callable接口六、使用线程池创建线程 一、继承Thread࿰…...
02 qt基本控件及信号和槽
一 QString类 功能:显示一个字符串内容 主要接口函数 构造函数: QString(const char *str)QString(const QString &other)赋值运算符重载: QString &operator=(const QString &other)功能函数: 1&...
大数据校招学员实习面试分享
本文实习面试总结来自一位非科班(机械专业)出身的在校生。 作为一个大数据领域的校招实习生,我在这里想分享一下我的经验和教训,希望对大家有所帮助。 1 简历投递准备 在准备简历时,首先需要准确地把握自己的技能和…...
用于弥散加权MRI的关节各向异性维纳滤光片研究(Matlab代码实现)
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
谷粒商城第十一天-品牌管理中关联分类
目录 一、总述 二、前端部分 1. 调整查询调用 2. 关联分类 三、后端部分 四、总结 一、总述 之前是在商品的分类管理中直接使用的若依的逆向代码 有下面的几个问题: 1. 表格上面的参数填写之后,都是按照完全匹配进行搜索,没有模糊匹配…...
Selenium自动化测试实战之自动化测试基础
自动化测试概念 是把以人为驱动的测试转化为机器执行的一种过程,它是一种以程序测试程序的过程。 自动化只是测试方式,跟测试阶段无关。 可以把任何测试工作写一个程序自动化实现都可以称为自动化测试。 selenium自动化测试:2023最新的Sele…...
vue3+vite中使用postcss-px-to-viewport适配问题
适配方案postcss-px-to-viewport使用过程中出现以下问题: postcss-px-to-viewport 不适配最新版本的postcss8 ⚠️报错: postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide: https://evilmartians.com/chronicles/postcss-8-plugin-migrati…...
web测试与app测试的区别
web测试与app测试的区别 首先从系统架构来看的话: web项目,一般都是b/s架构,基于浏览器的,而app则是c/s的,必须要有客户端。那么在系统测试测试的时候就会产生区别了。 web测试只要更新了服务器端,客户端…...
深入理解高并发编程 - 分析创建线程池究竟有哪些方式
1、使用Executors工厂方法: 使用Executors工厂方法创建线程池是一种简单快捷的方式,适用于一些常见的线程池需求。以下是几个示例,演示如何使用Executors工厂方法创建不同类型的线程池: 固定大小线程池 (newFixedThreadPool)&am…...
Kafka第一课概述与安装
生产经验 面试重点 Broker面试重点 代码,开发重点 67 章了解 如何记录行为数据 1. Kafka概述 1.产生原因 前端 传到日志 日志传到Flume 传到HADOOP 但是如果数据特比大,HADOOP就承受不住了 2.Kafka解决问题 控流消峰 Flume传给Kafka 存到Kafka Hadoop 从Kafka…...
Linux MQTT智能家居项目(智能家居界面布局)
文章目录 前言一、创建工程项目二、界面布局准备工作三、正式界面布局总结 前言 一、创建工程项目 1.选择工程名称和项目保存路径 2.选择QWidget 3.添加保存图片的资源文件: 在工程目录下添加Icon文件夹保存图片: 将文件放入目录中: …...
【Vue3】Vue3 UI 框架 | Element Plus —— 创建并优化表单
安装 # NPM $ npm install element-plus --save // 或者(下载慢切换国内镜像) $ npm install element-plus -S// 可以选择性安装 less npm install less less-loader -D // 可以选择性配置 自动联想src目录Element Plus 的引入和注入 main.ts import…...
如何基于 ACK Serverless 快速部署 AI 推理服务
作者:元毅 随着 AI 浪潮的到来,各种 AI 应用层出不穷,众所周知 AI 应用对 GPU 资源强烈依赖,但 GPU 很昂贵,如何降低 GPU 资源使用成本成为用户首要问题。而 AI 与 Serverless 技术结合,完全可以达到按需使…...
【奥义】如何用ChatGPT写论文搞模型
目录 你是否曾经在复现科研论文的结果时感到困难重重? 引言 1 打开需要复现的目标文献 2 提取公式定义的语句 3 文章公式、图实现 (1)用python复现目标文献中的公式 (2)用python复现目标文献中的图 4 Copy代码…...
欢迎光临,博客网站
欢迎光临:YUNYE博客~https://yunyeblog.com/更多的文章,供大家参考学习!!!...
通过TightVNC远程访问MacOS
目录 一、下载 TightVNC 下载链接:https://www.tightvnc.com/ 下载后按步骤进行安装,安装完成后安装目录如下: 运行 tvnviewer.exe,输入远程 IP,点击【connect】: 输入密码,点击【OK】后即可远…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称:Apache Flink REST API 任意文件读取漏洞CVE编号:CVE-2020-17519CVSS评分:7.5影响版本:Apache Flink 1.11.0、1.11.1、1.11.2修复版本:≥ 1.11.3 或 ≥ 1.12.0漏洞类型:路径遍历&#x…...
深度学习水论文:mamba+图像增强
🧀当前视觉领域对高效长序列建模需求激增,对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模,以及动态计算优势,在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内,就有不…...
AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而,传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案,能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
关于easyexcel动态下拉选问题处理
前些日子突然碰到一个问题,说是客户的导入文件模版想支持部分导入内容的下拉选,于是我就找了easyexcel官网寻找解决方案,并没有找到合适的方案,没办法只能自己动手并分享出来,针对Java生成Excel下拉菜单时因选项过多导…...
uniapp 小程序 学习(一)
利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 :开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置,将微信开发者工具放入到Hbuilder中, 打开后出现 如下 bug 解…...
Python网页自动化Selenium中文文档
1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API,让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API,你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...
