Question

所以我将数据从父组件传递给子组件，并在子组件中将其显示在视图中。一切都工作正常，但当我去康索时，我发现我有问题，虽然代码工作正常，显示的数据是我的预期。

父组件：

<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警告]：渲染错误：＆＃34; TypeError：无法读取属性＆＃39; title＆＃39;未定义＆＃34;
发现于 ---＆GT;在src \ components \ no_related \ article \ elements \ articleHeader.vue 在src \ components \ no_related \ article \ article.vue 在src \ App.vue

任何人都知道什么可能导致这种行为？

Answer 1

Vue在您的后端http请求完成之前呈现您的组件，即您的文章仍未定义。这是导致控制台进入的原因。

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

来自父组件的道具在儿童中未定义，尽管它正常工作

1 个答案: