微信小程序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.mfbz.cn/a/74358.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【SQL应知应会】索引(二)• MySQL版

欢迎来到爱书不爱输的程序猿的博客, 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 本文收录于SQL应知应会专栏,本专栏主要用于记录对于数据库的一些学习&#xff0c;有基础也有进阶&#xff0c;有MySQL也有Oracle 索引 • MySQL版 前言一、索引1.简介2.创建2.1 索引…

【计算机视觉|生成对抗】带条件的对抗网络进行图像到图像的转换(pix2pix)

本系列博文为深度学习/计算机视觉论文笔记&#xff0c;转载请注明出处 标题&#xff1a;Image-to-Image Translation with Conditional Adversarial Networks 链接&#xff1a;Image-to-Image Translation with Conditional Adversarial Networks | IEEE Conference Publicati…

解决ElementUI动态表单校验验证不通过

这里记录一下&#xff0c;写项目时遇到的一个问题&#xff1a;就是动态渲染的表单项&#xff0c;加验证规则后一直不通过&#xff01;&#xff01;&#xff01; 原代码 html部分&#xff1a; <el-form-itemv-for"(teaclass,index) in addFom.classIds":label&quo…

Android Sutdio 导入libs文件夹下的jar包没反应

有点离谱&#xff0c;笨笨的脑子才犯的错误 首先发现问题&#xff1a;转移项目的时候 直接复制粘贴libs文件夹下的jar包到新项目&#xff0c;在build.gradle文件下 使用语句并应用也没反应&#xff08;jar包没有出现箭头且代码报错&#xff0c;找不到&#xff09; implementa…

2023全球创见者大会|企企通总架构师杨华:基于SRM的电子发票解决方案, 破局企业开票困局

01、2023全球创见者大会 2023年8月8日&#xff0c;金蝶30周年庆典&2023全球创见者大会在深圳国际会展中心隆重举行。现场吸引了4000与会来宾齐聚一堂&#xff0c;超过100位演讲嘉宾组成豪华阵容&#xff0c;举办16场行业峰会&#xff0c;呈现了一场数字化领域备受瞩目…

Vue学习之条件渲染

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>条件渲染</title><!--引入Vue--><script type"text/javascript" src"../vue.js"></script></head><body><!--…

【二开】jeecgboot 开发过程方法扩展二开整理

【二开】jeecgboot 开发过程方法扩展二开整理 org.jeecg.modules.system.controller.CommonController#upload 可以二开统一文件上传 返回值增加文件大小 跟文件名称 //自定义 图片前缀savePath jeecgBaseConfig.getUploadRequestHost() savePath;if(oConvertUtils.isNotEm…

ES 概念

es 概念 Elasticsearch是分布式实时搜索、实时分析、实时存储引擎&#xff0c;简称&#xff08;ES&#xff09;成立于2012年&#xff0c;是一家来自荷兰的、开源的大数据搜索、分析服务提供商&#xff0c;为企业提供实时搜索、数据分析服务&#xff0c;支持PB级的大数据。 -- …

【数据库】Sql Server可视化工具SSMS条件和SQL窗格以及版本信息

2023年&#xff0c;第34周&#xff0c;第1篇文章。给自己一个目标&#xff0c;然后坚持总会有收货&#xff0c;不信你试试&#xff01; SQL SERVER 官方本身就有数据库可视化管理工具SSMS&#xff0c;所以大部分都会使用SSMS。以前版本是直接捆绑&#xff0c; 安装完成就自带有…

使用 AndroidX 增强 WebView 的能力

在App开发过程中&#xff0c;为了在多个平台上保持一致的用户体验和提高开发效率&#xff0c;许多应用程序选择使用 H5 技术。在 Android 平台上&#xff0c;通常使用 WebView 组件来承载 H5 内容以供展示。 一.WebView 存在的问题 自 Android Lollipop 起&#xff0c;WebVie…

LeetCode150道面试经典题-- 存在重复元素 II(简单)

1.题目 给你一个整数数组 nums 和一个整数 k &#xff0c;判断数组中是否存在两个 不同的索引 i 和 j &#xff0c;满足 nums[i] nums[j] 且 abs(i - j) < k 。如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 2.示例 示例 1&#xff1a; 输…

小米发布会:雷军成长故事与创新壮举,AI大模型技术引领未来,雷军探索之路之从创业波折到小米AI领航,成就高端化传奇!

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

PPT颜色又丑又乱怎么办?

一、设计一套PPT时&#xff0c;可以从这5个方面进行设计 二、PPT颜色 &#xff08;一&#xff09;、PPT常用颜色分类 一个ppt需要主色、辅助色、字体色、背景色即可。 &#xff08;二&#xff09;、搭建PPT色彩系统 设计ppt时&#xff0c;根据如下几个步骤&#xff0c;依次选…

【软件工程质量】代码质量管理平台Sonar

分析代码质量的工具有挺多的&#xff0c;比如&#xff1a;Alibaba Java Coding Guidelines plugin、QAPlug、SonarQube 等&#xff0c;平时用的比较多的事Alibaba Java Coding Guidelines plugin和sonarlint。 SonarQube 是一个用于管理源码质量的平台&#xff0c;帮助开发者…

SyntaxError: Cannot use import statement outside a module

node环境运行报错&#xff1a; 解决步骤&#xff1a; 1. npm init -y 2. 在 package.json 文件中加入一条&#xff1a;"type": "module", 3. 保存后再执行即可 附&#xff1a;最好是不要在node用import&#xff0c;否则需要上次配置 建议1&#xff1a;用re…

如何运用小程序技术闭环运营链路?

如何通过线上小程序获取用户线索&#xff0c;提高企业抗风险能力&#xff0c;建立有效的营销数字化系统一直是困扰每一个小程序开发者与运营者的问题。 当我们选择使用小程序设计自己的运营流程时&#xff0c;从「推广」到「转化」&#xff0c;再到最终的「留存」都是运营过程…

Kubernetes 部署DolphinScheduler 创建租户失败

创建租户 报错创建租户失败。后台日志如下 源代码跟踪 org.apache.dolphinscheduler.api.service.impl.TenantServiceImpl / if hdfs startup if (PropertyUtils.getResUploadStartupState()) {createTenantDirIfNotExists(tenantCode); }需要将 resource.storage.type 置为…

SpringBoot-Hello World

SpringBootWeb快速入门 创建Springboot工程&#xff0c;并勾选web开发相关依赖定义HelloController类&#xff0c;添加方法hello&#xff0c;并添加相关注释运行测试 创建新的SpringBoot项目 几个注意的点&#xff1a; Name&#xff1a;基本上不用管&#xff0c;会根据下面的Ar…

基于STM32CUBEMX驱动TMOS模块STHS34PF80(4)----中断获取信号

基于STM32CUBEMX驱动TMOS模块STHS34PF80----4.中断获取信号 概述样品申请视频教程参考Demo参考程序中断中断生成设置中断开启存在检测中断输出配置中断管脚主程序测试结果 概述 HS34PF80的数据准备信号提供了一种机制&#xff0c;允许设备在新的测量数据可读取时通知系统&…

网络安全(自学)

想自学网络安全&#xff08;黑客技术&#xff09;首先你得了解什么是网络安全&#xff01;什么是黑客&#xff01; 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全…
最新文章