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

Question

I am trying to render nested lists with vue components. My approch so far is to create two compontens: One component to render the 'Blog' posts and one component to render the comments. The 'Blogs' are rendering just fine, but the whole 'comments' are missing. I get no errors other than a warning, that I should the lists should have explicit keys. Can someone explain why the 'comments' are not rendering?

 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

Have a look below. To add unique keys to your blogs and comments use:

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

Where :key is a shorthand for v-bind:key . So this can be use for comment and blog as wel. In order to have html of a comment in blog you need to make a blog aware of the comment position by adding a slot . You can also make your components more readable by using template ${literals}

Also note that you have invalid HTML with <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>