Vue中v-for遍歷多層巢狀資料,不能重新渲染的問題
阿新 • • 發佈:2018-12-17
問題
{ "properties": [ [ { "name": "property_name", "example": "travel_time", "value": "" }, { "name": "property_value", "example": "20180831", "value": "" }, { "name": "property_name1_1", "example": "example of property_name1_1", "value": "" }, { "name": "property_name1_2", "example": "example of property_name1_2", "value": "" }, { "property_name2": [ [ { "name": "property_name2_1", "example": "example of property_name2_1", "value": "" }, { "name": "property_name2_2", "example": "example of property_name2_2", "value": "" } ] ] }, { "name": "property_name2_1_1", "example": "example of property_name2_1_1", "value": "" }, { "name": "property_name2_1_2", "example": "example of property_name2_1_2", "value": "" }, { "name": "property_name32_2", "example": "example of property_name2_2", "value": "" } ] ], "property_name2222": [ [ { "name": "property_name12_1", "example": "example1", "value": "" }, { "name": "property_name12_2", "example": "example2", "value": "" } ] ] }
最近在出了一個動態引數的問題,需要把後臺得json處理成一組巢狀的表單資料,並顯示動態表單,進過一番(好久好久)頭皮發麻的處理,終於處理成可用也是所需要的資料。 但是在生成動態表單時,當然是通過v-for指令來生成的,這是問題的前提。但是當我點選按鈕給陣列新增一個表單項時,介面並未更新,懵比,也沒遇到過啊,以前都有用的,咋現在熄火了呢。頭疼,各種折磨,弄了將近一天。
最後在這裡找到答案,原因是我這裡是物件嵌套了陣列,陣列嵌套了物件,且是多層的,因此Vue無法檢測到內部的更新或增刪。
如何解決
在完成對資料的更新後,強制Vue更新資料
this.$forceUpdate();
這樣就可以了!!!
此外,出現Vue不能檢測到資料更新的場景還有Vue無法檢測物件屬性的新增或刪除,詳細請看 這裡