vue：Uncaught TypeError：無法讀取屬性...的undefined

我使用[email protected]和vue official webpack template來構建應用程序。vue：Uncaught TypeError：無法讀取屬性...的undefined

在本地開發時，我經常看到警告Uncaught TypeError: Cannot read property ... of undefined，但HTML可以成功呈現。但是，使用npm run build命令將HTML部署到Netlify時，無法呈現HTML。所以我必須認真對待這個警告。

我從here瞭解到，這是因爲「組件呈現時數據不完整，而是例如從API加載數據」。並且解決方案是「僅在數據加載完成後才使用v-if來呈現模板的這一部分。」

有兩個問題：

我試圖總結v-if各地正在生成的警告，但個人，我認爲這個解決方案是冗長多個語句。有一個整潔的方法嗎？
本地開發中的「警告」在生產過程中變成了「致命錯誤」（HTML無法呈現）。如何讓他們一樣？例如他們兩個都會發出警告或錯誤？

來源

2016-12-09 Jerry Zhang

只需使用v-if就可以在模板中的所有元素上使用共同的父項，而不是依賴於該AJAX調用，而不是圍繞每個元素。

因此，而不是像這樣：

<div> 
    <h1 v-if="foo.title">{{ foo.title }}</h1> 
    <p v-if="foo.description">{{ foo.description }}</p> 
</div>

做

<div> 
    <template v-if="foo"> 
    <h1>{{ foo.title }}</h1> 
    <p>{{ foo.description }}</p> 
    </template> 
</div>

來源

2016-12-09 02:06:01

感謝您的快速回復。這工作。雖然我不知道這是否是唯一的解決方案，因爲我不想記住在每個具有AJAX調用的組件上面放置一個'v-if'。但是你的解決方案已經消除了我很大一部分頭痛。再次感謝。 –

沒問題。我不確定您加載了多少數據，但您可以預先加載所有數據，然後在準備好時顯示您的其他應用。 –

你試過初始化所有你需要的數據？例如如果你需要abc，你可以這樣做：

new Vue({ 
    data: { 
    a: 1, 
    b: '', 
    c: {} 
    }, 
    created(){ 
    // send a request to get result, and assign the value to a, b, c here 

    } 
})

這樣你不會得到任何xx is undefined錯誤

來源

2016-12-09 02:44:37 Sabrina

傢伙是正確的，但我可以補充一下。如果由於某種原因可能導致條件中的根元素不可定義，那麼最好使用類似這樣的東西：v-if='rootElement && rootElement.prop'。它將確保您獲得cannot get property prop of undefined，因爲當rootelement未定義時，它不會進一步檢查。

來源

2016-12-09 08:07:19

vue：Uncaught TypeError：無法讀取屬性...的undefined

回答

相關問題