vfor循环自定义组件以及删除指定组件遇到的坑

作者描述了在使用Vue开发中遇到的问题,即在v-for循环中添加和删除组件时,删除操作总是错误地影响到相邻的组件。问题出在Vue的diff算法对DOM结构相同的情况下的处理。解决方案是更改:key属性从index改为item,确保每个组件的唯一标识独立于数组索引。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

自己封装了一个如下黄色部分的组件,通过循环组件,实现组件的添加和删除

添加就是在reimburseNum数组里面push一个值就行,然后循环出现多个封装的盒子;添加没有任何问题

 但是删除时就出现了问题,比如我点击删除的是第二个盒子,但偏偏删除的永远都是最后一个;删除方法也没错,删除数组里面的指定位置,盒子删除正确,数组删除的位置也正确,但数据渲染有错,我点击删除第二个盒子后,页面展示的是原来第一个盒子,和原来第二个盒子,但我想删除的是原来第二个呀,怎么把我第三个删除了???

 后面仔细想想,怀疑是vfor的diff算法的问题,后面。用 v-for 进行的 DOM 元素染,DOM 对象结构相同,当删除盒子时,因为这个删除的盒子跟其他盒子的DOM 对象结构相同;Vue 的 DIFF 算法认为只需要更新组件的属性而不需要更新组件的染从而导致显示的内容不正确。

解决方法:

将 :key='index' 换成 :key='item'就行了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值