vue中v-for循环数组,在方法中splice删除数组元素踩坑记录
vue v-for循环数组,在方法中splice删除数组元素
之前博客记录过普通for循环中，针对对应符合条件的元素，使用splice删除导致出现的问题
附上博客地址：js数组splice删除某个元素爬坑
这里填一下在vue中v-for中使用splice删除元素的坑。
众所周知，我们使用v-for循环dom/组件，它有两个属性，item：当前循环的每一个元素，index：当前循环元素所对应的下标
个人习惯，平时绑定key值的时候，都习惯采用如下写法，直接绑定下标
<div v-else class="checkCavans" v-for="(item,index) in cavansArr" :key="index">
<rd-video
:cameraName="item.name"
:id="item.id"
:url="item.rtmp"
:isFull="isFull"
:isShowFullBtn="true"
:isAutoPlay="false"
:isOpenFlash="isOpenFlash"
ref="rdVideo"
@playerStateChange="playerStateChange"
></rd-video>
<img
src="../../../static/images/videoSurveillanceClose.png"
alt=""
@click="closeVideo(item)"
/>
</div>在图片（关闭图标）绑定的事件中，我们关闭当前的视频（销毁：数据驱动，直接改变数组即可）
closeVideo(currData) {
console.log('rd: closeVideo -> item', currData);
const index = this.cavansArr.findIndex(item => item.id === currData.id);
this.cavansArr.splice(index, 1);
},这里采取的是把当前数据当做参数传入事件中，然后通过findIndex找到数组中和当前数据id匹配的元素的下标，然后在数组中删除这条数据即可。
但是因为我们绑定key值采取的是index，我们这边删除元素会导致顺序错乱问题，并不会以我们期望的那样，点击第一条就会删除第一条。
查看vue官网对于key的介绍，最终找到了问题。
这里通俗的解释下：
下标在这是个临时身份，它的默认位置不会变化，如果你里面的item项移动了，那么移动的数据对应到index上，所以你的index对应的那个项就不是你想要的那个项了
所以本质上 :key=index 它们是同一个inedx 在不变化的前提下，一旦发生变化了，就不再是我们期望的那样了
所以这也是官方不推荐使用:key="index"的原因，如果业务发生变化，你的代码就出问题了
我们改造下代码，其他地方都可以不变，只需修改对于的key值即可
<div v-else class="checkCavans" v-for="item in cavansArr" :key="item.id">
<rd-video
:cameraName="item.name"
:id="item.id"
:url="item.rtmp"
:isFull="isFull"
:isShowFullBtn="true"
:isAutoPlay="false"
:isOpenFlash="isOpenFlash"
ref="rdVideo"
@playerStateChange="playerStateChange"
></rd-video>
<img
src="../../../static/images/videoSurveillanceClose.png"
alt=""
@click="closeVideo(item)"
/>
</div>这里我们绑定循环的每一项item中的一个唯一属性id（其他属性有可能出现从重复的情况，不一定绑定id属性，绑定任何属性都可，但是不管什么属性，保证其唯一性）
这样我们再使用splice时就不会出现这种错乱的问题了。
以上就是针对vue中使用v-for循环数组，在事件中操作数组元素（删除等）导致出现的问题。
js vue v-for循环删除数组项（删不干净的问题）
重点在与a -= 1,要让a随着被截取后数组长度的变化而变化，截取一个，a少一次。
let val = this.childData.chackNumber
for (let a = 0; a < val.length; a++) {
if (val[a].chack == false) {
val.splice(a,1)
a -= 1 //每删除一个项就让a减少一个 保持a和长度同步
}
}数据结构如下：
chackNumber: [
{
floorID:true,
chack: true,
name: "[01]"
},
{
floorID:false,
chack: false,
name: "[02]"
},
{
floorID:false,
chack: false,
name: "[03]"
},
{
floorID:false,
chack: false,
name: "[04]"
},
{
floorID:true,
chack: true,
name: "[05]"
},
{
floorID:false,
chack: false,
name: "[06]"
},
{
floorID:true,
chack: true,
name: "[07]"
},
{
floorID:false,
chack: false,
name: "[08]"
},
{
floorID:true,
chack: true,
name: "[09]"
},
{
floorID:true,
chack: true,
name: "[10]"
},
{
floorID:false,
chack: false,
name: "[11]"
}
]总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue3作为一个渐进式JavaScript框架,提供了强大的自定义指令功能,使得权限控制变得既简单又高效,本文将详细介绍如何在Vue3中使用自定义指令来判断内容是否显示,以满足不同用户权限下的界面展示需求,需要的朋友可以参考下2024-04-04
Element UI是一套基于Vue的桌面端组件库,封装好了很多常用的UI组件,下面这篇文章主要给大家介绍了关于element如何初始化组件功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
如何修改element-ui中tree组件的icon图标(小白都会的前端技能)
这篇文章主要给大家介绍了关于如何修改element-ui中tree组件的icon图标的相关资料,本文介绍的是小白都会的前端技能,文中通过代码以及图文介绍的非常详细,需要的朋友可以参考下2024-01-01
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
这篇文章主要介绍了解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
本文介绍了如何使用Vue 3编写一个带提示的表格组件,并假设每行都有一个保存按钮,如果需要全部保存,还会加上验证,感兴趣的朋友一起看看吧2025-02-02
我们日常项目开发中,少不了组件之间的通信,我们可能只知道一些常见的方式比如props,emits,其实,实现组件间的通信有很多种方式,本文就给大家总结一些我们常见的通信方式,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了在nuxt使用vueX代替storage的实现方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家介绍了使用Vite缩小打包体积如何实现的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了Vue配置环境变量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
这篇文章主要介绍了理顺8个版本vue的区别(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
最新评论