vue錯誤TypeError

【前提】：

搭建項目商家詳情頭部時，可以完整渲染出總體頭部界面無問題，但開發者工具仍然報出「Error in render: "TypeError: Cannot read property '0' of undefined」錯誤，具體以下

【解決過程】：

首先Google翻一下：

見文之意：這裏的意思就是模板在渲染時候，讀取對象中的某個對象的屬性值時，這個對象不存在，說通俗點就是三層表達式a.b.c，在對象a中沒有對象b，那麼讀取對象a.b.c中的值，天然會報錯。若是是兩層表達式a.b則不會報錯，返回的是undefined。

明白了緣由以後上手排查代碼發現果真下面vue模板代碼中果真出現了三層表達式，十分可疑，出錯的地方應該就在這裏，不過爲何呢？

【根本緣由】：

咱們發現這裏的info是vuex中state管理加載的數據，異步調用顯示，而後vue渲染機制中：

異步數據先顯示初始數據，再顯示帶數據的數據，

因此上來加載info時候仍是一個空對象以下

當渲染完成後，才加載異步數據以下：

因此在渲染時，出現的三層表達式在info中取support[0]數組中的小標爲0的對象還不存在，再在這個對象中取其餘值天然會報錯，可是渲染完成後，info中的值加載好了，天然能夠取到，這也就解釋了爲何界面正常顯示，但開發者工具會報錯的緣由。

【解決方案】：

在上面一個div中添加v-if判斷條件，若是info.supports取不到，則不加載該div便可解決。（注意，不能用v-show，v-show的機制是加載後，根據條件判斷是否顯示）