设置data-*属性自定义数据获取不到的问题
Posted LiPK
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了设置data-*属性自定义数据获取不到的问题相关的知识，希望对你有一定的参考价值。
问题描述
项目中使用:data-cateId="item.cateId"自定义数据属性，在取值时为undefined，经过控制台打印发现问题由大小写导致。
...
<div :data-cateId="item.cateId"></div>
...
...
const fuc = (e) =>
e = e || window.event;
let target = e.target || e.srcElement;
let cateId = parseInt(target.dataset.cateId, 10);
console.log(cateId); // 打印值为undefined
...
控制台打印target发现data-cateId变成了data-cateid，发现问题原因。
解决方案
1. 改成小写命名
使用target.dataset.cateid获取值
<div :data-cateid="item.cateId"></div>
2. 改成data-xx-xx格式
使用target.dataset.cateId或者target.dataset["cateId"]获取值
<div :data-cate-id="item.cateId"></div>
data-*规则
以上是关于设置data-*属性自定义数据获取不到的问题的主要内容，如果未能解决你的问题，请参考以下文章
springboot thymeleaf 需要使用data-*,自定义属性,获取值怎么操作