Javascript 使用v-for和vue组件呈现嵌套列表

我正在尝试使用vue组件呈现嵌套列表。到目前为止，我的方法是创建两个组件：一个组件用于呈现“博客”帖子，另一个组件用于呈现评论。“博客”呈现得很好，但整个“评论”都不见了。除了警告之外，我没有收到任何错误，即列表应该有显式键。有人能解释为什么“评论”没有呈现吗

var myBlogMainBody={
道具：[“博客”]，
模板：“”+
“{{blog.title}}”+
“{{blog.content}
”
}
var myCommentBody={
道具：[“评论”]，
模板：“Kommentare”+
“{comment.author}”+
“{comment.content}}”/*+
“自动”+
“科门塔尔”+
“Kommentieren”*/
}
var vm=新的Vue({
el:“#应用程序”，
数据：{blogEntries:[{
标题：“Erster Blogeintrag”，
内容：'我的心在哪里'，
评论：[{
作者:"海宁",，
内容：'Scheißblog'
},{
作者:"麦可",，
内容：“古特博客！”
}]
},
{
标题：“Zweiter Blogeintrag”，
内容：'我的心在哪里'，
评论：[{
作者:"海宁",，
内容：'Scheißblog'
},{
作者:"麦可",，
内容：“古特博客！”
},{
作者:"麦可",，
内容：“古特博客！”
}]
}],
},
方法：{
addNewBlog：函数（blog）{
让newBlog={
标题：blog.title，
内容：blog.content
}
this.blogEntries.push（newBlog）；
}
},
组成部分：{
“我的博客”：我的博客主体，
“我的评论”：myCommentBody
}
});
看看下面。要向博客和评论添加唯一键，请使用：



其中
：key
是
v-bind:key
的缩写。因此，这也可以用于
评论
和
博客
。为了在博客中包含评论的html，您需要通过添加一个标签使博客知道评论的位置。您还可以使用

还要注意的是，您使用
{{comment.content}
的HTML无效


var myBlogMainBody={
道具：[“博客”]，
模板：`
{{blog.title}
{{blog.content}}
`
}
var myCommentBody={
道具：[“评论”]，
模板：`Kommentare
{{comment.author}}
{{comment.content}}`/*
“自动”+
“科门塔尔”+
“Kommentieren”*/
}
var vm=新的Vue({
el:“#应用程序”，
数据：{blogEntries:[{
标题：“Erster Blogeintrag”，
内容：'我的心在哪里'，
评论：[{
作者:"海宁",，
内容：'Scheißblog'
},{
作者:"麦可",，
内容：“古特博客！”
}]
},
{
标题：“Zweiter Blogeintrag”，
内容：'我的心在哪里'，
评论：[{
作者:"海宁",，
内容：'Scheißblog'
},{
作者:"麦可",，
内容：“古特博客！”
},{
作者:"麦可",，
内容：“古特博客！”
}]
}],
},
方法：{
addNewBlog：函数（blog）{
让newBlog={
标题：blog.title，
内容：blog.content
}
this.blogEntries.push（newBlog）；
}
},
组成部分：{
“我的博客”：我的博客主体，
“我的评论”：myCommentBody
}
});

你应该给每个博客和评论一个唯一的：键。这可以通过使用
来完成。使用
：key
是
v-bind:key
的简写。而且
{comment.content}
不是有效的HTML。@SuperDJ是的
只是一个遗留问题，但它不会改变结果。我为什么需要钥匙？即使我插上那把钥匙也不行我的答案应该能回答这个问题