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>
        src="../../../static/images/videoSurveillanceClose.png"
        alt=""
        @click="closeVideo(item)"

在图片(关闭图标)绑定的事件中,我们关闭当前的视频(销毁:数据驱动,直接改变数组即可)

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>
        src="../../../static/images/videoSurveillanceClose.png"
        alt=""
        @click="closeVideo(item)"

这里我们绑定循环的每一项item中的一个唯一属性id(其他属性有可能出现从重复的情况,不一定绑定id属性,绑定任何属性都可,但是不管什么属性,保证其唯一性)

这样我们再使用splice时就不会出现这种错乱的问题了。