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
·
问题
就是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);
}
更多推荐
已为社区贡献2条内容
所有评论(0)