问题

就是v-for选择里面 删除数组指定元素 结果splice删除的永远都是最后一个

//html
<view class="card ml20 mr20 mt20 c-row"><view class="flex-cover time-main" v-for="(item,index) in tabbar" :key="index"><scroll-view class="time-list " scroll-y=""><view class="c-row c-column c-row-middle-center"><view class="c-row c-row-middle time-item" v-for="(citem,cindex) in item.list" :key="citem"><view class="del c-row c-row-middle-center" v-if="isEdit" @click="del(index,cindex)">-{{cindex}}</view></view></view></scroll-view></view></view>// JS 
/* 删除 */del(pindex,index){this.tabbar[pindex].list.splice(index,1);}
/* 添加时间 */addTime(index){this.tabbar[index].list.push({start : '',end : '',})},

原本以为很简单的删除 结果事与愿违  现实给你一个玩笑  他删除的不是你指定位置的  而是一直都是最后一个 ，这个是因为vue的机制原理造成的  因为在于key的绑定问题，我只是用下标来绑定每一个标签的key，而没有与数组中元素挂钩，因此当删除数组元素时，vue会采用一种叫做’就地复用‘的原则，将旁边的元素直接拿过来使用

方法

知道是KEY的原因就好办了，那就把KEY换成唯一的  可以是时间戳 也可以ID 保证唯一性就可以了

//html
<view class="card ml20 mr20 mt20 c-row"><view class="flex-cover time-main" v-for="(item,index) in tabbar" :key="index"><scroll-view class="time-list " scroll-y=""><view class="c-row c-column c-row-middle-center"><view class="c-row c-row-middle time-item" v-for="(citem,cindex) in item.list" :key="citem.id"><view class="del c-row c-row-middle-center" v-if="isEdit" @click="del(index,cindex)">-{{cindex}}</view></view></view></scroll-view></view></view>// js
/* 添加时间 */addTime(index){this.tabbar[index].list.push({start : '',end : '',id : this.tabbar[index].list.length + Math.random(),})},
/* 删除 */del(pindex,index){this.tabbar[pindex].list.splice(index,1);}

---------------------
作者：陈小白_weilin
来源：CSDN
原文：https://blog.csdn.net/qq_37564189/article/details/118415457
版权声明：本文为作者原创文章，转载请附上博文链接！
内容解析By：CSDN,CNBLOG博客文章一键转载插件