vue.js - VueJS 组件不显示正确的数据

Question

我是 Vue.js 的新手，我正在尝试更新一个模板（article.vue），重复一个组件以显示所有数据。

在我的测试中，我使用了假数据手册。

文件 artile.vue 是：

  <template>
   <div>
   <article-comp v-for="{book, index } in books" :key="index" :title="book.title"></article-comp>
</div>
 </template>

 <script>
  import Article from './../components/ArticleComponent'

export default {
    data: function () {
        return {
            books: [{
                userId: 1,
                id: 2,
                title: "delectus aut autem",
                completed: false
            }, {
                userId: 2,
                id: 1,
                title: "delectus aut autem",
                completed: false
            }, {
                userId: 3,
                id: 3,
                title: "delectus aut autem",
                completed: false
            }]
        }
    },
    components: {
        'article-comp': Article
    }
}

</script>

文件 ArticleComponent 有一行

 <a class="" href="/event/title/1">{{ title }}</a>

渲染显示 3 个链接（正确），但缺少标题（空）

我做错了什么：

    <article-comp v-for="{book, index } in books" :key="index" :title="book.title"></article-comp>

谢谢你的帮助！

标签： vue.jsvuejs2

Answer 1

您需要告诉 ArticleComponent 组件标题是一个道具（数据来自父/外部）。

export default {
 props: ['title']
}