父组件的道具在子组件中未定义，尽管它可以正常工作

Question

所以我将数据从父组件传递给子组件，然后在子组件中将其显示在视图中。一切正常，但是当我去 consol 时，我发现那里发生了问题，尽管代码工作正常并且显示的数据符合我的预期。

父组件：

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

此行位于<template> 标记中。文章变量是 API 后端 http 请求中收集的值。

在 <article-header> 的子组件中，我像这样使用这些数据：

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

    export default {
        props:['article']
    }

</script>

它运行良好，它完全按照我想要的方式从数据库中显示我的标题，但它也在浏览器控制台中给出错误：

[Vue 警告]：渲染错误：“TypeError: Cannot read property 'title' of undefined”

发现于 ---> 在 src\components\no_related\article\elements\articleHeader.vue 在 src\components\no_related\article\article.vue 在 src\App.vue

有人知道什么会导致这种行为吗？

Answer 1

Vue 在您的后端 http 请求完成之前渲染您的组件，即您的文章仍未定义。这就是导致控制台中的条目的原因。

一旦您的 http 请求完成，Vue 会使用现有数据更新组件。这就是您在浏览器中看到的内容。