1. 程式人生 > 實用技巧 >vue渲染時 取物件的物件報錯

vue渲染時 取物件的物件報錯

info: {
     support: {
          key: "2222",
          value: ""
      },
   },

  見文之意:這裡的意思就是模板在渲染時候,讀取物件中的某個物件的屬性值時,這個物件不存在,說通俗點就是三層表示式a.b.c,在物件a中沒有物件b,那麼讀取物件a.b.c中的值,自然會報錯。如果是兩層表示式a.b則不會報錯,返回的是undefined。

然後vue渲染機制中:非同步資料先顯示初始資料,再顯示帶資料的資料,

所以在渲染時,出現的三層表示式在info中取support[0]陣列中的小標為0的物件還不存在,再在這個物件中取其他值自然會報錯,但是渲染完成後,info中的值載入好了,自然可以取到,這也就解釋了為什麼介面正常顯示,但開發者工具會報錯的原因

【解決方案】:

在上面一個div中新增v-if判斷條件,如果info.support取不到,則不載入該div即可解決。(注意,不能用v-show,v-show的機制是載入後,根據條件判斷是否顯示