在學習仿餓了嗎項目的時候,遇到了一個渲染的問題:
意思就是說模板在渲染的時候,讀取這個對象的屬性的時候,這個對象不存在,是undefined,所以就會報錯,
查找了很多博客,找到了問題:
異步調用顯示,然后vue渲染機制中:
異步數據先顯示初始數據,再顯示帶數據的數據,
所以上來加載info時候還是一個空對象如下:
當渲染完成后,才加載異步數據如下:
所以在渲染時,出現的三層表達式在info中取support[0]數組中的小標為0的對象還不存在,再在這個對象中取其他值自然會報錯,但是渲染完成后,info中的值加載好了,自然可以取到,這也就解釋了為什么界面正常顯示,但開發者工具會報錯的原因。
【解決方案】:
在上面一個div中添加 v-if 判斷條件,如果info.supports取不到,則不加載該div即可解決。(注意,不能用v-show,v-show的機制是加載后,根據條件判斷是否顯示)