uni-app 自定义属性值的问题

uni-app 自定义属性值的问题 产品分类：uniapp/H5

项目 内容
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 64
HBuilderX类型 正式
HBuilderX版本号 3.3.5
浏览器平台 Chrome
浏览器版本 83.0.4103.97
项目创建方式 HBuilderX

示例代码：

<block v-for="(item, index) in list" :key="index">  

    <view class="flex entrance-item" :data-item="item" @click.stop="sfsdfsdf">  

    </view>  
</block>

操作步骤：

<block v-for="(item, index) in list" :key="index">  

    <view class="flex entrance-item" :data-item="item" @click.stop="sfsdfsdf">  

    </view>  
</block>

更多关于uni-app 自定义属性值的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

如果是运行时没问题 vue3 也可以正常获取到，如果是发行的话 就不行了

更多关于uni-app 自定义属性值的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已确认，下次发版修复

HBuilderX alpha 3.4.0 已修复该问题

在 uni-app 的 H5 平台中，:data-item="item" 绑定的是一个对象类型，但 HTML 的 data-* 属性值只能存储字符串。当 Vue 编译时，会将对象隐式转换为 "[object Object]"，导致实际属性值丢失原有结构。在点击事件中通过 e.currentTarget.dataset.item 获取到的将是一个字符串 "[object Object]"，而非原对象。

正确的处理方式是在 [@click](/user/click) 事件中直接传递数据：

<view class="flex entrance-item" [@click](/user/click).stop="sfsdfsdf(item)">

这样 sfsdfsdf 方法就能直接接收到 item 对象。如果必须使用自定义属性（例如为了 CSS 选择器或非 Vue 的其他逻辑），可将对象序列化为 JSON 字符串：

<view :data-item="JSON.stringify(item)" [@click](/user/click).stop="handleClick">
回到顶部