javascript - Vue刪除陣列元素,導致剩餘元素沒有被重新渲染
女神的闺蜜爱上我
女神的闺蜜爱上我 2017-06-12 09:29:02
0
2
1089

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

html程式碼如下:
有兩個元件:一個是Main元件,用來包含所有的內容容器;一個是子元件,用來顯示內容。

#js程式碼如下:

#然後還有一個Vuex的store:

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

   state.Content.splice(i,1);

但是使用後發現,在刪除元素後,這個元素後面的元素會被重新加載,並且沒有被重新渲染,頁面中的vue邏輯沒有被正常執行。

嘗試過多種方式後還是沒有解決,感覺應該是當元素被刪除後,後面元素的下標發生變化,導致元素中的內容被重新加載,但又沒有被渲染。

因此我最終的解決方案是,如上圖中所示,不直接刪除元素,而是使用

state.Content.splice(i,1,null);

的方式將陣列中的元素設為空,但又不會改變陣列的排列方式,從而最終解決問題。
但是這種解決方式只能說治標不治本,並不能很好的解答我的疑問。
因此我想請問各位大神,有沒有什麼更好的方式可以解決?

女神的闺蜜爱上我
女神的闺蜜爱上我

全部回覆(2)
巴扎黑

你試試clone一下數組,然後在這個數組裡操作後把這個數組賦值給之前那個. 這樣一定會觸發Vue的重新渲染.

PS : 順便一提,Vue會不會重新渲染根據的是依賴的資料有沒有變化.所以,如果你用普通方法增刪引用類型的資料(Array,Object...),Vue可能不會偵測到資料的變化.So,你用上面我說的那個方法(簡單粗暴),或用Vue提供的this.$set...之類的方法.

滿天的星座

你刪除的時候,可以嘗試重新給state.Content賦值
我通常是這麼做
state.content = state.content.map( e=> {

if(e.id !==x) return e 

})

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板