自己封装了一个如下黄色部分的组件,通过循环组件,实现组件的添加和删除
添加就是在reimburseNum数组里面push一个值就行,然后循环出现多个封装的盒子;添加没有任何问题
但是删除时就出现了问题,比如我点击删除的是第二个盒子,但偏偏删除的永远都是最后一个;删除方法也没错,删除数组里面的指定位置,盒子删除正确,数组删除的位置也正确,但数据渲染有错,我点击删除第二个盒子后,页面展示的是原来第一个盒子,和原来第二个盒子,但我想删除的是原来第二个呀,怎么把我第三个删除了???
后面仔细想想,怀疑是vfor的diff算法的问题,后面。用 v-for 进行的 DOM 元素染,DOM 对象结构相同,当删除盒子时,因为这个删除的盒子跟其他盒子的DOM 对象结构相同;Vue 的 DIFF 算法认为只需要更新组件的属性而不需要更新组件的染从而导致显示的内容不正确。
解决方法:
将 :key='index' 换成 :key='item'就行了