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