tapOption(e) {
console.log(e)
// #ifdef APP-NVUE
var index = e.currentTarget.attr.dataIndex
// #endif
// #ifndef APP-NVUE
var index = e.currentTarget.dataset.index
// #endif
this.$emit('tapindex', {detail: {index: index}})
}
7***@qq.com
- 发布：2024-11-18 12:04
- 更新：2024-11-18 14:40
- 阅读：81
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： window 10
HBuilderX类型： 正式
HBuilderX版本号： 4.29
手机系统： iOS
手机系统版本号： iOS 14
手机厂商： 苹果
手机机型： iphone 6s
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
点击列表下的某一栏
点击列表下的某一栏
预期结果：
console.log(e)
输出的是结构一个是：
{
"type": "click",
"timeStamp": 1731902250741,
"target": {
"id": "",
"attr": {
"dataIndex": 2
},
"offsetLeft": 0,
"offsetTop": 0
},
"currentTarget": {
"id": "",
"attr": {
"dataIndex": 2
},
"offsetLeft": 0,
"offsetTop": 0
},
"detail": {},
"stopPropagation": "function() { [native code] }"
}
console.log(e)
输出的是结构一个是：
{
"type": "click",
"timeStamp": 1731902250741,
"target": {
"id": "",
"attr": {
"dataIndex": 2
},
"offsetLeft": 0,
"offsetTop": 0
},
"currentTarget": {
"id": "",
"attr": {
"dataIndex": 2
},
"offsetLeft": 0,
"offsetTop": 0
},
"detail": {},
"stopPropagation": "function() { [native code] }"
}实际结果：
console.log(e)
输出的是结构一个是：
{
"type": "click",
"timeStamp": 1731902250741,
"target": {
"id": "",
"dataset": {
"index": 2
},
"offsetLeft": 0,
"offsetTop": 0
},
"currentTarget": {
"id": "",
"dataset": {
"index": 2
},
"offsetLeft": 0,
"offsetTop": 0
},
"detail": {},
"stopPropagation": "function() { [native code] }"
}
走的位置是：
// #ifdef APP-NVUE
var index = e.currentTarget.attr.dataIndex
// #endif
是没错的
console.log(e)
输出的是结构一个是：
{
"type": "click",
"timeStamp": 1731902250741,
"target": {
"id": "",
"dataset": {
"index": 2
},
"offsetLeft": 0,
"offsetTop": 0
},
"currentTarget": {
"id": "",
"dataset": {
"index": 2
},
"offsetLeft": 0,
"offsetTop": 0
},
"detail": {},
"stopPropagation": "function() { [native code] }"
}走的位置是：
// #ifdef APP-NVUE
var index = e.currentTarget.attr.dataIndex
// #endif
是没错的
bug描述：
index.nvue 引用了一个 子组件：report-box.vue，在子组件的列表下每栏都有点击事件：@tap="tapOption" :data-index="index"，在nvue的情况下，获取index 应该是 e.currentTarget.attr.dataIndex，而不是 e.currentTarget.dataset.index
8***@qq.com - 欢迎观看最近更新的《uni-app 踩坑实录》,涉及一些在文档上不容易看到的疑难杂症的解决方案。https://www.bilibili.com/cheese/play/ss60198
看你的代码：@tap="tapOption" :data-index="index"， 调用子组件的地方，是能拿到index的。如果是想父组件获取点击的子组件的index的话，这样写：
父组件中：
<reportBox @click="showIndex(index)" />
7***@qq.com (作者)
你这个是整块子组件的点击事件，我这个是子组件下的 某个栏目的点击事件
子组件：
<view>
<view v-for="(item,index) in list" :key="index">
<view @tap="tapOption" :data-index="index">{{ item }}</view>
</view>
</view>
<scrpit>
export default {
methods: {
tapOption(e) {
/*
{
"type": "click",
"timeStamp": 1731902250741,
"target": {
"id": "",
"attr": {
"dataIndex": 2
},
"offsetLeft": 0,
"offsetTop": 0
},
"currentTarget": {
"id": "",
"attr": {
"dataIndex": 2
},
"offsetLeft": 0,
"offsetTop": 0
},
"detail": {},
"stopPropagation": "function() { [native code] }"
}
/
console.log(e)
// #ifdef APP-NVUE
// 执行了这步
var index = e.currentTarget.attr.dataIndex
// #endif
}
}
}
</script>
2024-11-18 14:51
7***@qq.com (作者)
是能解决，但它就是一个bug
2024-11-18 14:54
7***@qq.com (作者)
以前是 e.currentTarget.attr.dataIndex 现在不知道为啥会变成 e.currentTarget.dataset.index 而且好诡异的事 用整个页面用vue的话 在子组件 现在是获取不了data-*的值
2024-11-18 16:12
8***@qq.com
回复 7***@qq.com: 我刚才好像理解错你意思了。其实问题点在于nvue页面引用vue组件，然后vue组件里的条件编译走的却是 nvue平台是吧？ 这一点我就不清楚了。 然后获取data-的方式，没看到文档有提到nvue和vue需要区别处理。。。
2024-11-18 16:16