uniapp vue3编译到小红书平台for循环事件错乱,小红书原生代码没有问题

uniapp vue3编译到小红书平台for循环事件错乱,小红书原生代码没有问题

开发环境 版本号 项目创建方式
Mac Somoma 14.7.1 CLI

产品分类:uniapp/小程序/微信

示例代码:

```html
<template>  
  <view style="margin: 64px 0">  
    <view style="font-size: 32px; color: blue; padding: 32px;" [@click](/user/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](/user/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>  

操作步骤:

npm i
npm run dev:xhs
小红书IDE 打开mp-xhs 目录,基础库选择 3.116.2
点击退出登陆

预期结果:

应该响应的是 userLogout 这个函数

实际结果:

实际响应的是 toAgreement 这个函数

bug描述:

点击退出登陆, 应该响应的是 userLogout 这个函数, 实际响应的是 toAgreement 这个函数,
试了下原生的小红书小程序没有这个问题,uniapp vue3把 :key="item.key" 删除 或 改成 :key="item.id" 就可以,或者把  [@click](/user/click).stop.prevent 改成  [@click](/user/click) 也可以。
小红书IDE 使用的是最新的 2.3.2,基础库选的3.116.2,公司的Taro 项目没有这个问题
搜帖子以前微信也有过类似反馈 https://ask.dcloud.net.cn/question/137217 


4 回复

你把绑定的key改成item.id呢。。现在你的item.key是undefined


因为生产环境中数据确实存在key缺失的情况,但我理解这种情况不应该出现事件会错乱,最多是起不了节点复用的效果,原生的微信小程序,小红书小程序,以及Taro key 写错了也是没关系的。

回复 菜鸟前端0498: 所以说改成唯一的key能解决吗?

您好作者,您是怎么运行小红书小程序的啊,怎么我点击运行小红书开发者小程序,直接到他的导入项目页面就进不去了,我的也是vue3版本

回到顶部