使用 v-for 和 vue 组件渲染嵌套列表

Question

我正在尝试使用 vue 组件呈现嵌套列表。到目前为止，我的方法是创建两个组件：一个组件用于呈现 'Blog' 帖子，一个组件用于呈现评论。 'Blogs' 渲染得很好，但整个 'comments' 都不见了。除了警告之外我没有收到任何错误，我应该列表应该有明确的键。有人可以解释为什么 'comments' 没有呈现吗？

var myBlogMainBody = {
    props: ['blog'],
    template: '<div>'+
              '<h3>{{blog.title}}</h3>'+
              '<p>{{blog.content}}</p></div>'
}

var myCommentBody = {
    props: ['comment'],
    template: '<div><h4>Kommentare</h4>' +
              '{{comment.author}}' +
              '<td>{{comment.content}}</div>' /* + 
              '<table><tr><td>Autor</td><td><input v-model="blog.comment.author"></textarea></td></tr>' +
              '<tr><td>Kommentar</td><td><textarea v-model="blog.comment.content"></textarea></td></tr></table>' +
              '<button v-on:click="$emit(`commit-new-comment`,comment)">Kommentieren</button></div>' */
}

var vm = new Vue({
    el:'#app',
    data:{ blogEntries:[{
                title: 'Erster Blogeintrag',
                content: 'Hier steht mein Inhalt',
                comments:[{
                    author: 'Henning',
                    content: 'Scheiß blog'
                },{
                    author:'Maike',
                    content: 'Guter Blog!'
                }]
            },
            {
                title: 'Zweiter Blogeintrag',
                content: 'Hier steht mein Inhalt',
                comments:[{
                    author: 'Henning',
                    content: 'Scheiß blog'
                },{
                    author:'Maike',
                    content: 'Guter Blog!'
                },{
                    author:'Maike',
                    content: 'Guter Blog!'
                }]
            }],
            
        },
    methods:{
        addNewBlog: function(blog){
            let newBlog = {
                title: blog.title,
                content: blog.content
            }
            this.blogEntries.push(newBlog);
        }
    },
    components:{
        'my-blog': myBlogMainBody,
        'my-comment': myCommentBody
    }
});

      <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <div id=app>
        <my-blog v-for='blog in blogEntries'v-bind:blog='blog'>
          <my-comment v-for='comment in blog.comments' v-bind:comment='comment'></my-comment>
        </my-blog>
        
        <create-blog-entry v-on:commit-new-blog='addNewBlog'></create-blog-entry>
    </div>
    <script type="text/javascript" src="myBlog.js"></script>

Answer 1

往下看。要为您的博客和评论添加唯一键，请使用：

<my-blog v-for='(blog, i) in blogEntries'v-bind:blog='blog' :key="blog-${i}">

其中 :key 是 v-bind:key 的 shorthand。所以这也可以用于 comment 和 blog。为了在博客中获得 html 的评论，您需要通过添加 slot. You can also make your components more readable by using template ${literals}

让博客知道评论的位置

另请注意，您的 HTML 与 <td>{{comment.content}}</div> 无效。

var myBlogMainBody = {
    props: ['blog'],
    template: `<div>
              <h3>{{blog.title}}</h3>
              <p>{{blog.content}}</p><slot></slot></div>`
}

var myCommentBody = {
    props: ['comment'],
    template: `<div><h4>Kommentare</h4>
              {{comment.author}}
              <div>{{comment.content}}</div></div>` /* 
              '<table><tr><td>Autor</td><td><input v-model="blog.comment.author"></textarea></td></tr>' +
              '<tr><td>Kommentar</td><td><textarea v-model="blog.comment.content"></textarea></td></tr></table>' +
              '<button v-on:click="$emit(`commit-new-comment`,comment)">Kommentieren</button></div>' */
}

var vm = new Vue({
    el:'#app',
    data:{ blogEntries:[{
                title: 'Erster Blogeintrag',
                content: 'Hier steht mein Inhalt',
                comments:[{
                    author: 'Henning',
                    content: 'Scheiß blog'
                },{
                    author:'Maike',
                    content: 'Guter Blog!'
                }]
            },
            {
                title: 'Zweiter Blogeintrag',
                content: 'Hier steht mein Inhalt',
                comments:[{
                    author: 'Henning',
                    content: 'Scheiß blog'
                },{
                    author:'Maike',
                    content: 'Guter Blog!'
                },{
                    author:'Maike',
                    content: 'Guter Blog!'
                }]
            }],
            
        },
    methods:{
        addNewBlog: function(blog){
            let newBlog = {
                title: blog.title,
                content: blog.content
            }
            this.blogEntries.push(newBlog);
        }
    },
    components:{
        'my-blog': myBlogMainBody,
        'my-comment': myCommentBody
    }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <div id="app">
        <my-blog v-for="(blog, b) in blogEntries" :blog="blog" :key="`blog-${b}`">
          <my-comment v-for="(comment, c) in blog.comments" :comment="comment" :key="`comment-${c}`"/>
        </my-blog>
        
        <create-blog-entry v-on:commit-new-blog="addNewBlog"/>
    </div>
    <script type="text/javascript" src="myBlog.js"></script>

使用 v-for 和 vue 组件渲染嵌套列表

Rendering nested list with v-for and vue components

html

javascript

vue.js

vue-component