問題
最近開發項目時,遇到一個非常特殊的問題(以前也遇到過但都用很多亂七八糟的方式解決了!),這個問題就是當我在methods的某一個方法中修改了頁面v-for的資料時,本應該重新渲染的頁面沒有響應,還是維持老樣子,當我點選頁面上的其他元件時,頁面才重新渲染出來。
給大家看一下就是下面這個效果。
下面這兩個,是點選其他元件時又成功渲染出來的樣子。
原因
這裡說一個概念,在元件初始化的時候,對data中的某一個數組進行遞歸周遊,會對數組中資料的每一個屬性進行劫持,添加set,get方法。我們後來新加的資料,并沒有通過Object.defineProperty設定成響應式資料,修改後不會視圖更新渲染。
這也是導緻問題的根本原因,這裡還有個原因是因為資料層次太多,沒有觸發render函數進行自動更新,是以才出現的第一次新增成功第二次新增失敗。
解決
解決方法很簡單,直接在你處理完的資料的方法中調用下面這個方法即可。
下面是我加的位置,大家根據自己代碼自行參考一下:
解決完成
喜歡的同學給個免費的點贊吧,Thanks♪(・ω・)ノ