CODEWITHSUNDEEP
javascriptvue.jsvuejs2
BT101
BT101

Reputation: 3836

props from father component is undefined in child although it work correctly

So I pass data from father component to child and in child display it in view. Everything is working fine but when I go to consol I found out that I have issue occure there although code is working just fine and displayed data is what I expected.

Father component:

<article-header :article="articles"></article-header>

this line is in <template> tags. Article variable is value gathered in API backend http request.

In child component which is <article-header> I use this data like so:

<template>
<p>{{ article[0].title }}</p>
</template>
<script>

    export default {
        props:['article']
    }

</script>

And it is working fine it show me my title from database exacly like I want but it also give error in browser console:

[Vue warn]: Error in render: "TypeError: Cannot read property 'title' of undefined"

found in ---> at src\components\no_related\article\elements\articleHeader.vue at src\components\no_related\article\article.vue at src\App.vue

Anyone know what could cause such behavior?

Upvotes: 1

Views: 426

Answers (1)

Patrick
Patrick

Reputation: 1338

Vue is rendering your component before your backend http request has finished, i.e. your article is still undefined. That's what's causing the entry in the console.

Once your http request has finished, Vue updates the component with the now existing data. That's what you see in the browser.

Upvotes: 2

Related Questions