记录一个bug ，在uniapp开发微信小程序中，使用v-for 设置key时如果key值不唯一，会导致一些问题！！

已于 2023-06-21 13:56:39 修改
阅读量361 收藏
点赞数
分类专栏： uniapp(小程序) 文章标签： bug uni-app 微信小程序
于 2023-06-16 14:35:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57033755/article/details/131246468
版权
在uniapp构建微信小程序时，如果在v-for循环中使用了非唯一的key，并且给循环内的DOM元素绑定了点击事件并传入item参数，可能会发现在点击事件处理函数里，item值为undefined。这个问题源于key的重复导致的数据绑定混乱。
摘要由CSDN通过智能技术生成

场景：

在uniapp开发微信小程序中，使用v-for 设置key时如果key值不唯一，然后在循环中有个dom上加了点击事件参数时这个item，那么那个点击事件函数里面打印item是undefined的！！

柑橘乌云_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
VUE(uni-app框架)开发微信小程序②-for循环
qq_39075676的博客
10-17 3427
记录美好
uniapp 小程序双重v-for 的key bug
草莓Sir的博客
07-16 2092
uniapp 双重v-for 问题描述 在uniapp小程序中，在使用v-for构建双重循环的时候，出现bug，如下: VM8129:1 thirdScriptError Cannot read property ‘2’ of undefined; [Component] Event Handler Error @ pages/appointment/index#nt TypeError: Cannot read property ‘2’ of undefined 问题分析 双重循环，key绑定的
vue课后习题及答案
最新发布
m0_73490019的博客
06-05 3960
1.Vue是一套用于构建___用户界面_____的渐进式框架.2.Vue中的指令以______v-__开头.3.Node.js 是一个基于____V8___引擎的JavaScript运行环境。4.在yam 中，__yarn add__命令用于添加指定名称的包。5.在 npm 中，_________命令用于卸载指定名称的包。
uniapp打包成app v-for中key值类型
weixin_43963309的博客
03-11 1834
环境：vue3 ，uniapp 问题：在uniapp 非H5端，使用v-for循环，key值用的是item中的某个参数值（string类型）， 在app端，搜索数据的时候，接口返回四条数据，但是app只显示两条数据，后经排查，修改key值后可以正常显示 ...
uniapp 关于v-for中key的用处
龙小虬的博客
06-19 4404
在uniapp文档中，说明过 :key 是用来指定列表中项目的唯一的标识符 已经说明了，key标识的只是对象中的一个属性，防止在重新渲染只是出问题，并不能为排序的提供一些作用（当然除了一些特别麻烦的方法），对象属性的内容显示顺序并不会因为key而改变 ...
uniapp 中使用v-for 偶发列表不渲染（key值动态变化）
qq_55856928的博客
04-06 518
解决办法是把v-for key值全部取循环的索引。可解决办法是用this.$set来设置变化的数组。
微信小程序树形菜单替代组件:路径视图path-view
01-27
微信小程序 树形菜单替代组件：路径视图 path-view 项目截图 路径视图动态效果图-路径模式：mode1: 路径视图动态效果图-路径模式：mode2: 更新说明 2018-08-13 修复value以及unnormalizedValue更新时视图无法同步...
在线购物商城微信小程序源码（包含前端和后台）.rar
06-19
在线购物商城微信小程序前端和后台数据管理系统源码，使用.net开发，测试无Bug，感兴趣的欢迎下载 二、微信小程序功能 1、 会员自动授权登录注册 2、 产品分类、产品检索、产品筛选、产品详情、 3、 广告展示、 ...
微信小程序+原生php实现登录获取openid的功能
04-25
微信小程序提供了用户授权登录的功能，当用户点击小程序中的“登录”按钮，微信会返回一个临时code到小程序，小程序再将这个code发送到服务器进行验证。 2. **OAuth2.0授权机制** 微信小程序的登录机制基于OAuth...
在线商城微信小程序源码.NET后台源码.zip
07-21
在vs中打开 自动可以操作了 在线购物商城微信小程序前端和后台源码 源码描述： 一、源码特点 在线购物商城微信小程序前端和后台数据管理系统源码，使用.net开发，测试无Bug，感兴趣的欢迎下载 二、微信小程序功能 1...
微信小程序解密遇到pad block corrupted
05-15
在微信小程序开发过程中，安全是至关重要的一个环节，特别是在处理敏感数据时，如用户信息、交易数据等。这里我们遇到了一个问题："pad block corrupted"，这是一个关于加密解密过程中的错误提示，通常与填充块相关...
uniapp的v-for的key不同平台的兼容解决
weixin_30745553的博客
09-17 2542
问题 当同一个页面同时存在两个或两个以上的 v-for 遍历的时候，在不同环境中存在以下两种不同的warning： 代码（两个v-for）： <!-- 标题+列表 开始 --> <view v-for="(list,listindex) in workList" :key="listindex" :class="listindex>0 ? 'margi...
v-for的key值不唯一导致报错
m0_46815188的博客
10-14 278
报错原因：key值不唯一
在uniapp开发微信小程序时，v-for中使用slot的正确姿势
wangxi83的博客
08-13 4625
使用uniapp开发微信小程序，v-for中使用slot的正确方法
v-for循环空数组异常渲染排查解决【uniapp,微信小程序,vue】
General_D的博客
12-04 1878
列表异常显示空行，但部分正常，怀疑是渲染问题。通过源码我们得知渲染使用了v-for，咱们分为两种情况进行排查,那就先排除一个最简单的，是否存在换行符；其次排除是否存在异常渲染的情况，如渲染了看不见，渲染了空元素。
小程序v-for与key值使用
weixin_59525879的博客
09-09 1141
在数据更新时，如果没有提供“key”属性，则小程序框架会尝试使用每个项的索引作为标识，这可能会导致不必要的性能开销和渲染问题。属性的作用是用来区分每个循环项的标识，这样可以提高性能，防止重复渲染和更新数据。因此，对于一般的列表循环渲染，建议给每个循环项一个唯一的。如果数据中没有唯一的标识，则可以使用。值，但是此方法的性能可能会受到一些影响。为每个数据项的唯一标识。用于给每个循环项分配一个唯一的标识。与Vue中的用法基本相同。
uni-app v-bind和v-for的使用
雨下听风声
01-25 1178
v-bind的使用 <image v-bind:src="imgUrl"></image> 数据： <script> export default{ data(){ return{ imgUrl:'', arr:[ { name:'张三'， ..
uniapp 小程序 flex布局 v-for 4栏展示
weixin_30702887的博客
09-29 1590
注：本项目的图片资源来源于后端接口，所以使用的是v-for。 关键词：uniapp 小程序 flex布局 v-for 4栏展示 自适应 <view style="display: flex; flex-direction: row;flex-wrap: wrap;margin: 0 5%;"> 　　<view style="width: ...
v-for渲染的问题，通过key来渲染唯一性，我们最好用id，用index的坑【vue中上传图片使用v-for所带的key值的缓存问题】
m0_52611940的博客
01-06 284
v-for渲染的问题，通过key来渲染唯一性，我们最好用id，用index的坑
vue3在微信小程序中的bug
05-12
目前，Vue 3 在微信小程序中仍然存在一些问题和 Bug。以下是一些已知的问题： 1. 在微信小程序中，使用 v-model 时，当输入框失去焦点时，数据不会被同步更新到父组件。 2. 在微信小程序中，使用 v-for 渲染列表时，列表中的组件可能会在滚动时闪烁。 3. 在微信小程序中，使用 keep-alive 缓存组件时，组件的生命周期钩子可能会不正常触发。 4. 在微信小程序中，使用 v-show 时，显示和隐藏组件的性能可能会受到影响。 5. 在微信小程序中，使用 Vue Router 时，路由切换时可能会出现页面空白的问题。 为了解决这些问题，你可以尝试使用一些第三方库或者自己手动处理。例如，你可以使用 mpvue 或者 uni-app 等框架来支持 Vue 3 在微信小程序中的开发。此外，你还可以手动监听事件、使用原生组件替代 Vue 组件等方式来解决这些问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柑橘乌云_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值