<template>
<view style="margin: 64px 0">
<view style="font-size: 32px; color: blue; padding: 32px;" @click.stop.prevent="toAgreement" :data-id="item.id" :data-title="item.value"
v-for="(item, index) in agreement" :key="item.key">
<view>
{{ item.value }}
</view>
</view>
<view style="font-size: 32px; color: red; padding: 32px;" @click.stop.prevent="userLogout">
<view>退出登录</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
agreement: [],
};
},
onShow() {
this.getPolicyNames();
},
methods: {
getPolicyNames() {
this.agreement = [
{
"id": "id1",
"value": "列表项目1"
},
{
"id": "id2",
"value": "列表项目2"
},
{
"id": "id3",
"value": "列表项目3"
},
]
},
toAgreement(e) {
console.log('toAgreement', e, e.currentTarget?.dataset?.title);
uni.showToast({
title: '协议',
icon: 'none',
});
},
async userLogout(e) {
console.log('userLogout', e);
uni.showToast({
title: '退出登录',
icon: 'none',
});
}
},
};
</script>
菜鸟前端0498
- 发布：2025-02-13 12:29
- 更新：2025-02-13 14:13
- 阅读：26
产品分类： uniapp/小程序/微信
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： Somoma 14.7.1
第三方开发者工具版本号： 2.3.2
基础库版本号： 3.116.2
项目创建方式： CLI
CLI版本号： 3.0.0-3090520231028001
示例代码：
操作步骤：
npm i
npm run dev:xhs
小红书IDE 打开mp-xhs 目录，基础库选择 3.116.2
点击退出登陆
npm i
npm run dev:xhs
小红书IDE 打开mp-xhs 目录，基础库选择 3.116.2
点击退出登陆
预期结果：
应该响应的是 userLogout 这个函数
应该响应的是 userLogout 这个函数
实际结果：
实际响应的是 toAgreement 这个函数
实际响应的是 toAgreement 这个函数
bug描述：
点击退出登陆， 应该响应的是 userLogout 这个函数， 实际响应的是 toAgreement 这个函数，
试了下原生的小红书小程序没有这个问题，uniapp vue3把 :key="item.key" 删除 或 改成 :key="item.id" 就可以，或者把 @click.stop.prevent 改成 @click 也可以。
小红书IDE 使用的是最新的 2.3.2，基础库选的3.116.2，公司的Taro 项目没有这个问题
搜帖子以前微信也有过类似反馈 https://ask.dcloud.net.cn/question/137217
菜鸟前端0498 (作者)
因为生产环境中数据确实存在key缺失的情况，但我理解这种情况不应该出现事件会错乱，最多是起不了节点复用的效果，原生的微信小程序，小红书小程序，以及Taro key 写错了也是没关系的。
52 分钟前
靐齉齾麤龖龗
回复 菜鸟前端0498: 所以说改成唯一的key能解决吗？
41 分钟前