javascript - 来自父组件的 Prop 在子组件中未定义，尽管它可以正常工作

Question

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

父组件:

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

这一行在<template>标签。 Article 变量是 API 后端 http 请求中收集的值。

在子组件中 <article-header>我这样使用这些数据:

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

    export default {
        props:['article']
    }

</script>

它工作正常，它完全按照我的意愿从数据库中显示我的头衔，但它也会在浏览器控制台中给出错误:

[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

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

Answer 1

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

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