vue 接口調用返回的數據未渲染問題

    如果在實例創建之後添加新的屬性到實例上,他不會觸發視圖更新。

官方說明:

https://cn.vuejs.org/v2/guide/reactivity.html#%E5%A6%82%E4%BD%95%E8%BF%BD%E8%B8%AA%E5%8F%98%E5%8C%96

    下面這段是官方的一段

    當你把一個普通的 JavaScript 對象傳入 Vue 實例作爲 data 選項,Vue 將遍歷此對象所有的屬性,並使用 Object.defineProperty 把這些屬性全部轉爲 getter/setter;這些 getter/setter 對用戶來說是不可見的,但是在內部它們讓 Vue 能夠追蹤依賴,在屬性被訪問和修改時通知變更。

    差不多的意思就是,在初始化實例時,VUE會將對象屬性轉化爲帶getter/setter的,只有setter/getter,頁面上的數據才能被監聽並修改。

這裏記一個開發中遇到的問題:

代碼如下:在回調方法裏又再次請求後端,然後又對對象內部屬性賦值,結果可以看第二張圖(瀏覽器的調試圖)

    可以看到,這個menu對象的children和number屬性有值,但是沒有setter/getter方法,

    渲染後的結果圖如下,第二次回調方法裏的數據未被渲染到頁面,

  而要讓後面添加的數據在頁面被渲染,就要讓VUE知道我們新添加的屬性,使用vue.$set (object,key,value)方法添加屬性

修改:

調試圖:可以看到children和number已經有setter/getter方法了

渲染結果:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章