DOM节点中dataset的值在uni-app中的使用

DOM节点中dataset的值在uni-app中的使用

产品分类：

uniapp/H5

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

10

HBuilderX类型：

正式

HBuilderX版本号：

4.87

浏览器平台：

Chrome

浏览器版本：

142.0.7444.176

项目创建方式：

HBuilderX

示例代码：

<view class="text-value" data-value-field="rinserTime" data-text-field="rinserTimeStr" data-list-field="rinserTimeType" @click="handleShowPicker">
{{ form.rinserTimeStr }}
</view>  

const handleShowPicker = (e) =>{
const listField = e.currentTarget.dataset.listField;
const textField = e.currentTarget.dataset.textField;
const valueField = e.currentTarget.dataset.valueField;
console.log(textField,valueField)
}

操作步骤：

<view class="text-value" data-value-field="rinserTime" data-text-field="rinserTimeStr" data-list-field="rinserTimeType" @click="handleShowPicker">
{{ form.rinserTimeStr }}
</view>  

const handleShowPicker = (e) =>{
const listField = e.currentTarget.dataset.listField;
const textField = e.currentTarget.dataset.textField;
const valueField = e.currentTarget.dataset.valueField;
console.log(textField,valueField)
}

预期结果：

要在handleShowPicker 中能获取到valueField的值。

实际结果：

现在实际valueField为空。

bug描述：

在view中定义 data-value-field ,在view上加上click事件。在click调用中e.currentTarget.dataset.valueField 居然获取不到值是空对像。


更多关于DOM节点中dataset的值在uni-app中的使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

根据您描述的问题，在uniapp的H5环境中通过e.currentTarget.dataset获取不到data-value-field等自定义属性的值，这个问题可能有以下原因和解决方案：
事件绑定对象确认：在H5平台，建议使用e.target.dataset代替e.currentTarget.dataset，因为事件冒泡可能导致currentTarget指向不准确。
编译差异：uni-app在编译到H5平台时，dataset属性的命名会从data-value-field转换为valueField（驼峰式）。但您已说明不是大小写问题，所以可以排除。
兼容性方案：可以直接尝试： const valueField = e.target.getAttribute(‘data-value-field’); 参考文档：

uni-app节点信息获取

view组件文档

如果仍有问题，请检查HBuilderX是否最新版本，或尝试新建空白项目测试该功能。

内容为 AI 生成，仅供参考

更多关于DOM节点中dataset的值在uni-app中的使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


该bug反馈内容基本完整，标题、描述、代码示例、复现步骤、预期与实际结果齐全，但可补充具体运行平台（如App/小程序类型）及错误日志细节。代码示例可直接运行，但缺少组件上下文（如template/script包裹），不过不影响核心问题定位。
bug成立。根据知识库，UniApp中事件对象e.currentTarget.dataset应能正常获取自定义数据属性（文档依据），且dataset字段在App、微信小程序、H5等平台均支持。用户使用data-value-field后通过e.currentTarget.dataset.valueField访问符合规范，但HBuilderX 4.87版本可能存在数据集解析异常。需注意：若运行在非支持平台（如部分小程序），或存在框架版本兼容性问题（建议升级至最新版验证），可能导致dataset为空。
非基础概念问题，用户用法正确。可能原因包括：1) 特定平台限制（如鸿蒙需单独处理）；2) 编译时未正确注入dataset属性。建议检查运行平台，优先在H5/微信小程序测试；若为App平台，可尝试用plus.webview.currentWebview().dataset替代方案（参考文档）。 内容为 AI 生成，仅供参考

你好 我本地是可以拿到的

我的是vue2的，没用setup语法糖。
handleShowPicker(e) { console.log(e); }


你这还是多年前的jquery那套玩法了，现在可以直接读取this.data，不用再自定义属性了。

在 uni-app 中，dataset 的命名规则与微信小程序保持一致，使用驼峰命名法（camelCase）进行访问。你的代码中使用了连字符（kebab-case）定义属性，但在 JavaScript 中访问时，需要转换为驼峰形式。

问题分析：

  • HTML 中定义：data-value-field
  • JavaScript 中访问：应使用 e.currentTarget.dataset.valueField

解决方案： 你的代码实际上已经正确使用了驼峰命名访问，但问题可能出在其他地方。请检查以下几点：

  1. 事件对象结构确认： 在 uni-app 中，H5 平台的事件对象与微信小程序保持一致。确保你打印完整的事件对象查看结构：

    const handleShowPicker = (e) => {
  console.log('完整事件对象:', e)
  console.log('currentTarget:', e.currentTarget)
  console.log('dataset:', e.currentTarget.dataset)
  
  const listField = e.currentTarget.dataset.listField
  const textField = e.currentTarget.dataset.textField
  const valueField = e.currentTarget.dataset.valueField
  console.log('获取的值:', { listField, textField, valueField })
}

  2. 平台差异处理： 如果是多端兼容，建议使用 uni-app 的跨端事件处理方式：

    const handleShowPicker = (e) => {
  // 兼容各平台的事件对象差异
  const dataset = e.currentTarget?.dataset || {}
  const listField = dataset.listField
  const textField = dataset.textField
  const valueField = dataset.valueField
  console.log('获取的值:', { listField, textField, valueField })
}

  3. 事件绑定确认： 确保事件绑定正确，没有其他事件覆盖或阻止冒泡：

    <view 
  class="text-value" 
  data-value-field="rinserTime" 
  data-text-field="rinserTimeStr" 
  data-list-field="rinserTimeType" 
  @click.stop="handleShowPicker"
>
  {{ form.rinserTimeStr }}
</view>
回到顶部