天天看點

vue修改資料後,頁面不重新進行渲染的問題(當點選其他頁面元素會重新渲染資料)

問題

最近開發項目時,遇到一個非常特殊的問題(以前也遇到過但都用很多亂七八糟的方式解決了!),這個問題就是當我在methods的某一個方法中修改了頁面v-for的資料時,本應該重新渲染的頁面沒有響應,還是維持老樣子,當我點選頁面上的其他元件時,頁面才重新渲染出來。

給大家看一下就是下面這個效果。

vue修改資料後,頁面不重新進行渲染的問題(當點選其他頁面元素會重新渲染資料)

下面這兩個,是點選其他元件時又成功渲染出來的樣子。

vue修改資料後,頁面不重新進行渲染的問題(當點選其他頁面元素會重新渲染資料)
vue修改資料後,頁面不重新進行渲染的問題(當點選其他頁面元素會重新渲染資料)

原因

這裡說一個概念,在元件初始化的時候,對data中的某一個數組進行遞歸周遊,會對數組中資料的每一個屬性進行劫持,添加set,get方法。我們後來新加的資料,并沒有通過Object.defineProperty設定成響應式資料,修改後不會視圖更新渲染。

這也是導緻問題的根本原因,這裡還有個原因是因為資料層次太多,沒有觸發render函數進行自動更新,是以才出現的第一次新增成功第二次新增失敗。

解決

解決方法很簡單,直接在你處理完的資料的方法中調用下面這個方法即可。

下面是我加的位置,大家根據自己代碼自行參考一下:

vue修改資料後,頁面不重新進行渲染的問題(當點選其他頁面元素會重新渲染資料)

解決完成

vue修改資料後,頁面不重新進行渲染的問題(當點選其他頁面元素會重新渲染資料)

喜歡的同學給個免費的點贊吧,Thanks♪(・ω・)ノ