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>

感谢您的帮助！

Answer 1

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

export default {
 props: ['title']
}

Answer 2

只需尝试

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

问题可能是您的组件尚未准备好，因此您始终需要使用v-for指令使用v-if来避免在渲染时出现此问题

VueJS组件未显示正确的数据

2 个答案: