天天看點

vue執行操作成功但頁面不重新整理_Vue數組操作不重新整理視圖問題的解決

最近使用Vue2.0開發項目,有一個清單使用v-for綁定到數組,按照Vue的推薦方案,使用push、splice、this.$set三個變異方法操作數組。發現在添加頁面,三個方法都能及時重新整理視圖;但是在修改頁面,隻有this.$set方法修改數組元素能重新整理,其他兩個方法死活不重新整理視圖,使用Vue-devtools檢視,資料都能成功修改。

嘗試了在mount階段就用push方法一個個添加,嘗試把用到的對象都顯示定義字段屬性,嘗試百度到的N種方法...花了四五個小時,都不行!但問題肯定是出在沒有觸發Vue重新整理視圖的條件上。

最終模拟了一個手工強制重新整理的辦法:

1、html中增加一個hidden,綁定到一個flag字段:

vue執行操作成功但頁面不重新整理_Vue數組操作不重新整理視圖問題的解決

2、mount階段給flag賦初值:

vue執行操作成功但頁面不重新整理_Vue數組操作不重新整理視圖問題的解決

3、在push和splice後,修改flag的值!!!

vue執行操作成功但頁面不重新整理_Vue數組操作不重新整理視圖問題的解決
vue執行操作成功但頁面不重新整理_Vue數組操作不重新整理視圖問題的解決

思路:由于flag是簡單字段,它的變化肯定要重新整理視圖,是以通過flag的變化,手工重新整理視圖。

由此可見,Vue的視圖重新整理是整體重新整理,而不是隻重新整理變化的字段。