vue 项目中 splice 删除的不是指定的位置 而是最后一个

问题

就是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);}