Vue 刪除陣列元素,導致剩餘元素被重新渲染

2022-02-21 00:53:05 字數 426 閱讀 1317

最近在專案中有使用vue,然而在開發過程中發現,當我對陣列中的元素進行刪除時,會導致該元素後面的元素沒有被重新渲染。

html**如下:

有兩個元件:乙個是main元件,用來包含所有的內容容器;乙個是子元件,用來顯示內容。

js**如下:

然後還有乙個vuex的store:

正常來說,在刪除子容器時,應該可以直接使用vue中陣列的重寫方法splice進行刪除。如:

state.content.splice(i,1);
因此我最終的解決方案是,如上圖中所示,不直接刪除元素,而是使用

state.content.splice(i,1,null);
的方式將陣列中的元素設定為空,但又不改變陣列的排列方式,從而最終解決問題。

但是這種解決方式只能說治標不治本,並不能很好的解答我的疑問。

js刪除陣列元素

方法 array.remove dx 功能 刪除陣列元素.引數 第乙個引數是說明第二個引數的型別,index 表示第二個引數是元素下標,element 表示第二個引數是要刪除的元素 返回 在原陣列上修改陣列 刪除陣列元素,第乙個引數是說明第二個引數的型別,index 表示第二個引數是元素下標,ele...

JS刪除陣列元素

js刪除陣列元素 view plaincopy to clipboardprint?1.delete方法 delete arr 1 這種方式陣列長度不變,此時arr 1 變為undefined了,但是也有好處原來陣列的索引也保持不變,此時要遍歷陣列元素可以才用 for index in arr do...

PHP刪除陣列元素

我們在使用php語言進行實際 編寫時,經常會和陣列打上交道,這對於初學者來說是比較困難的。今天我們就要向大家介紹如何實現php刪除陣列元素。php中的陣列要新增元素非常簡單,直接用賦值就行了,陣列的key會自動增加,但是要刪除陣列中的元素呢?你想過嗎?是不是很少遇到?我近日在處理乙個購物籃程式時遇到...