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

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

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

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

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

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

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

眾所周知，我們使用v-for循環(huán)dom/組件，它有兩個(gè)屬性，item：當(dāng)前循環(huán)的每一個(gè)元素，index：當(dāng)前循環(huán)元素所對(duì)應(yīng)的下標(biāo)

個(gè)人習(xí)慣，平時(shí)綁定key值的時(shí)候，都習(xí)慣采用如下寫法，直接綁定下標(biāo)

<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>

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

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

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

但是因?yàn)槲覀兘壎╧ey值采取的是index，我們這邊刪除元素會(huì)導(dǎo)致順序錯(cuò)亂問題，并不會(huì)以我們期望的那樣，點(diǎn)擊第一條就會(huì)刪除第一條。

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

這里通俗的解釋下：

下標(biāo)在這是個(gè)臨時(shí)身份，它的默認(rèn)位置不會(huì)變化，如果你里面的item項(xiàng)移動(dòng)了，那么移動(dòng)的數(shù)據(jù)對(duì)應(yīng)到index上，所以你的index對(duì)應(yīng)的那個(gè)項(xiàng)就不是你想要的那個(gè)項(xiàng)了

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

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

我們改造下代碼，其他地方都可以不變，只需修改對(duì)于的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)的每一項(xiàng)item中的一個(gè)唯一屬性id（其他屬性有可能出現(xiàn)從重復(fù)的情況，不一定綁定id屬性，綁定任何屬性都可，但是不管什么屬性，保證其唯一性）

這樣我們?cè)偈褂胹plice時(shí)就不會(huì)出現(xiàn)這種錯(cuò)亂的問題了。

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

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

重點(diǎn)在與a -= 1,要讓a隨著被截取后數(shù)組長(zhǎng)度的變化而變化，截取一個(gè)，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 ? //每刪除一個(gè)項(xiàng)就讓a減少一個(gè) 保持a和長(zhǎng)度同步
? ? ? ? }
? ? ? }

數(shù)據(jù)結(jié)構(gòu)如下：

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