Vue數組操作不刷新視圖問題的解決


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

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

最終模擬了一個手工強制刷新的辦法:

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

2、mount階段給flag賦初值:

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

思路:由於flag是簡單字段,它的變化肯定要刷新視圖,所以通過flag的變化,手工刷新視圖。

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM