vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄

更新時間：2023年06月27日 09:57:18 作者：壞丶毛病

這篇文章主要介紹了vue中v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue v-for循環(huán)數(shù)組,在方法中splice刪除數(shù)組元素

之前博客記錄過普通for循環(huán)中，針對對應符合條件的元素，使用splice刪除導致出現(xiàn)的問題

附上博客地址：js數(shù)組splice刪除某個元素爬坑

這里填一下在vue中v-for中使用splice刪除元素的坑。

眾所周知，我們使用v-for循環(huán)dom/組件，它有兩個屬性，item：當前循環(huán)的每一個元素，index：當前循環(huán)元素所對應的下標

個人習慣，平時綁定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>

在圖片（關閉圖標）綁定的事件中，我們關閉當前的視頻（銷毀：數(shù)據(jù)驅(qū)動，直接改變數(shù)組即可）

closeVideo(currData) {
    console.log('rd: closeVideo -> item', currData);
	const index = this.cavansArr.findIndex(item => item.id === currData.id);
	this.cavansArr.splice(index, 1);
},

這里采取的是把當前數(shù)據(jù)當做參數(shù)傳入事件中，然后通過findIndex找到數(shù)組中和當前數(shù)據(jù)id匹配的元素的下標，然后在數(shù)組中刪除這條數(shù)據(jù)即可。

但是因為我們綁定key值采取的是index，我們這邊刪除元素會導致順序錯亂問題，并不會以我們期望的那樣，點擊第一條就會刪除第一條。

查看vue官網(wǎng)對于key的介紹，最終找到了問題。

這里通俗的解釋下：

下標在這是個臨時身份，它的默認位置不會變化，如果你里面的item項移動了，那么移動的數(shù)據(jù)對應到index上，所以你的index對應的那個項就不是你想要的那個項了

所以本質(zhì)上 :key=index 它們是同一個inedx 在不變化的前提下，一旦發(fā)生變化了，就不再是我們期望的那樣了

所以這也是官方不推薦使用:key="index"的原因，如果業(yè)務發(fā)生變化，你的代碼就出問題了

我們改造下代碼，其他地方都可以不變，只需修改對于的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>

這里我們綁定循環(huán)的每一項item中的一個唯一屬性id（其他屬性有可能出現(xiàn)從重復的情況，不一定綁定id屬性，綁定任何屬性都可，但是不管什么屬性，保證其唯一性）

這樣我們再使用splice時就不會出現(xiàn)這種錯亂的問題了。

以上就是針對vue中使用v-for循環(huán)數(shù)組，在事件中操作數(shù)組元素（刪除等）導致出現(xiàn)的問題。

js vue v-for循環(huán)刪除數(shù)組項（刪不干凈的問題）

重點在與a -= 1,要讓a隨著被截取后數(shù)組長度的變化而變化，截取一個，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和長度同步
? ? ? ? }
? ? ? }

數(shù)據(jù)結構如下：

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]"
? ? ? ? ? }
? ? ? ? ]