v-for循环key用index的bug

最新推荐文章于 2023-12-07 10:40:46 发布
最新推荐文章于 2023-12-07 10:40:46 发布
阅读量1.6k 收藏 4
点赞数
分类专栏： 前端 文章标签： vue bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN_hwb/article/details/107538795
版权
本文介绍了在Vue项目中，使用`v-for`循环并以数组索引作为key值时遇到的一个线上bug。当对列表进行筛选导致元素顺序变化时，子组件的data数据出现错误。原因是Vue的diff算法导致的，通过更改key值为item的唯一标识（如id）可以解决这个问题，以避免类似问题的发生。
摘要由CSDN通过智能技术生成

近期公司项目中出现了一个线上bug，场景为：我们使用列表list作为循环遍历一个子组件，key值用的list的index下标，list中的每一项item作为props属性传入子组件中，如图。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1LA41hV2-1595489856392)(/Users/huangwanbin/Library/Application Support/typora-user-images/image-20200723143158577.png)]
在子组件中，我们以item内的值为判断标准定义了一个组件的data属性，如图。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mBncymUY-1595489856397)(/Users/huangwanbin/Library/Application Support/typora-user-images/image-20200723142705360.png)]
组件如图:
在这里插入图片描述
然后我们在父组件中对list数组进行筛选操作，筛选过后，list长度变短，内容顺序自然变化，我们遍历的子组件顺序也相应发生变化。

最低0.47元/天 解锁文章
前端小学生hwb
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中的v-for循环key属性注意事项小结
10-18
5. **在组件中使用`key`**：当`v-for`循环应用于组件时，尤其需要`key`属性，因为它可以帮助Vue在组件更新时更有效地跟踪和复用组件实例。 6. **性能优化**：`key`属性对于大型列表的性能优化至关重要，它可以减少...
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
<div v-for="(listLZPar, index) in listLZParams" :key="index"> <!-- 其他元素 --> ``` 在这个例子中，`listLZParams`是包含数据的数组，`listLZPar`是对当前遍历到的元素的引用，`index`则是元素的索引。 要...
vue中使用v-for时为什么不能用index作为key
10-15
主要介绍了vue中使用v-for时为什么不能用index作为key，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-11-03 v-for 之key为index
hellozhxyuan
11-03 989
用 index 作为 key 时，在对数据进行，逆序添加，逆序删除等破坏顺序的操作时，会产生没必要的真实 DOM更新，从而导致效率低 用 index 作为 key 时，如果结构中包含输入类的 DOM，会产生错误的 DOM 更新 在开发中最好每条数据使用唯一标识固定的数据作为 key，比如后台返回的 ID，手机号，身份证号等唯一值 如果不存在对数据逆序添加，逆序删除等破坏顺序的操作时，仅用于渲染展示用时，使用 index 作为 key 也是可以的（但是还是不建议使用，养成良好开发习惯）。 ...
vue中用v-for遍历填充列表时，可能会由于index作为key产生顺序显示错误是为什么呢？
ytfdcxy的博客
10-19 1069
VUE
v-for 使用index做key关键值问题
qq_44158369的博客
05-10 912
下图是我们页面展示内容，我们在实现按钮上的操作时再进行动画 下面是代码实现 <template> <div> <button @click="addNum">添加数字</button> <button @click="removeNum">删除数字</button> <button @click="shuffleNum">数字洗牌</button> <transi
v-for 绑定key值,不建议使用index (原因详解)
weixin_46174785的博客
07-10 6960
v-for 中的key值： 使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素; 我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法; 例子： const list = [ { id: 1, name: 'test1', }, { id: 2, name: '
在vue的v-for中使用索引index值
01-06
在`v-for`循环中，我们可以使用`index`为元素绑定动态属性，例如类名、样式或者属性值。比如，当索引为偶数时，我们可能希望元素具有不同的背景色： ```html <div v-for="(item, index) in items" :key="index" ...
解决vue v-for 遍历循环时key值报错的问题
10-18
在Vue.js中，`v-for`指令用于遍历数组或对象，它是一个非常重要的功能，但如果不正确地使用`key`属性，可能会遇到警告或性能问题。本文将深入探讨这个问题，帮助你理解如何正确处理`v-for`循环中的`key`值。 首先，...
在vue的v-for中，key为什么不能用index？
bb_xiaxia1998的博客
10-01 227
简而言之，就是通过 JS 来模拟 DOM 结构，关于纠结以什么 JS 数据结构来模拟 DOM 并没有一套标准，只要能完全覆盖 DOM 的所有结构即可，下面以较为通用的方式演示一下。通过对 DOM 结构的分析，我们可以用 tag 表示 DOM 节点的类型，props 表示 DOM 节点的所有属性，包括 style、class 等，children 表示子节点（没有子节点则表示内容），这样子我们就把整个 DOM 通过 JS 模拟出来了，然后呢?然后看看下一章~~~
使用elementUI插件后v-for遍历时index索引值报错
m0_48994856的博客
10-08 422
使用elementUI插件后v-for遍历时index索引值报错
vue 中$index $key 已经移除了
diaohanliu7622的博客
02-09 253
之前可以这样: <ul id="example"> <li v-for="item in items"> {{$index}} {{$key}} </li> </ul> 现在已经移除,如果还用的话就会报错:Uncaught ReferenceError: $index i...
vue v-for循环的key值使用经验及采坑总结
bamboozjy的博客
08-13 4028
必要性: vue v-for循环时一定要加key值,vue官方也说一定要加,这和vue渲染机制和更新机制有很大关联.不加key的话eslint或vuter也会报错. 使用方法: 1.一般可以使用索引充当key值(不涉及节点增删时),不过最好使用数组中的对象中的唯一键作为key.即[{id:xx,...},{id:xxx,...}]中的id作为key.这可避免节点增删时出现数据或其他错误(本人就踩了一次坑,使用了索引导致数据出错)。 或者循环数组自定义一个key值,key='key' + i++.
vue3 不推荐使用index作为v-for遍历的key
James_liPeng的博客
11-01 1980
vue3 不推荐使用index作为v-for的key
【揭秘Vue核心】为什么不建议在 v-for 指令中使用 index 作为 key，让你秒懂！
李刚的学习专栏
07-17 409
在没有 key 的情况下，Vue 将使用一种最小化元素移动的算法，并尽可能地就地更新/复用相同类型的元素。如果传了 key，则将根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素。 虚拟DOM在比较元素的时候，因为DOM上的key等属性均未发生变化，所以其自身和内部的input均被复用了。所以，在实际开发过程中不要把 index 作为 key 值。
vue for in 遍历 为啥总报错_【前端词典】Vue 使用时常见的 5 个问题
weixin_39925813的博客
12-08 503
前言今天分享 5 个你或许在使用 Vue 开发过程中也遇到的问题。Vue 使用时常见的 5 个问题自定义路径别名可能有些人注意到了，在 vue-cli 生成的模板中在导入组件时使用了这样的语法：import Index from '@/components/Index'这个 @ 是什么东西？后来改配置文件的时候发现这个是 webpack 的配置选项之一：路径别名。我们也可以在基础配置文件...
v-for 中的key设置为index值会有什么问题
最新发布
青城的博客
12-07 1035
如果列表项没有唯一标识符，可以使用其它属性或组合属性作为 key，以确保每个列表项的 key 值都是唯一的。在 Vue.is 中，v-for 指令中的 key 属性用于指定循环列表项的唯一标识，以便 Vue 在更新 DOM 时能够正确地追踪每个列表项的状态。通常情况下，我们会将 key 属性设置为列表项的唯一标识符，例如 ID 等。更新问题: 当列表项的顺序发生变化时2.由于每个列表项都使用相同的 index 值作为 key，Vue 可能会错误地认为一些列表项没有发生变化，从而不会正确地更新他们的状态。
[Vue warn]: Invalid prop: custom validator check failed for prop “index“
Xpy 的博客
04-19 472
v-for 遍历数组展示列表时，报错 index 不能是数值型，需要转换成字符串。 ps：这里只是个demo，后期不建议使用 index 值。 <el-menu-item v-for="(item,index) in routerList" :index="index + 1" //错误写法 问题出在这里 // :index="JSON.stringify(index + 1)" //正确写法 转化一下字符串就不报错了 :key="item.path" > <s
v-for 循环key
08-30
v-for 循环中的 key 是为了给每个迭代的元素分配一个唯一的标识符。它的作用是帮助 Vue.js 进行高效的元素更新和重用。 在 Vue.js 中，当使用 v-for 渲染一个数组时，Vue.js 需要追踪每个元素的身份，以便在数据改变时，能够移动已有的 DOM 元素来匹配新的数据顺序，而不是重新创建和销毁 DOM 元素。这样可以提升性能，并且在处理列表过程中可以维持组件的状态。 为了实现这一点，我们需要为每个迭代的元素提供一个 key，这个 key 必须是唯一的。Vue.js 使用 key 来跟踪元素的身份，当数据项发生变化时，Vue.js 可以通过 key 的变化来判断哪些元素是新创建的、哪些是被移动的、哪些是被删除的。 在 v-for 中使用 key 的示例： ```html <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> ``` 在上面的例子中，我们将每个 item 对象的 id 属性作为 key。确保 key 的值是每个元素唯一且稳定的标识符。 需要注意的是，不要使用迭代的索引作为 key，除非你确定列表顺序永远不会改变。因为 Vue.js 通过 key 的变化来判断元素的移动和更新，如果使用索引作为 key，可能会导致出现意外的渲染行为。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值