vue递归显示树形结构
我需要实现一个评论回复功能，任何人可以回复 （评论和评论的回复），如下图：
在递归显示回复的时候我遇到了问题，我需要在显示每一条回复的时候判断它是否有子回复
用vue实现评论的渲染，评论数据如下：
data:{
commentList:[
{
"Id":"1",
"author":"mldwyy",
"created_at":"2019-2-2",
"content":"我是评论我是评论评论评论1",
"reply":
[
{
"id":"0",
"author":"mldwyy",
"created_at":"2019-2-3",
"content":"hello to go to the to go to the 我在回复mldwyy的1，我是2",
"reply":[{
"id":"18",
"author":"reply",
"created_at":"2019-2-3",
"content":"hello to go to the to go to the 我是回复mldwyy的2，我是3",
"reply":[
{
"id":"5",
"author":"reply",
"created_at":"2019-2-3",
"content":"hello to go to the to go to the 我回reply的3，我是4"
}
]
},
{
"id":"2",
"author":"reply",
"created_at":"2019-2-3",
"content":"hello to go to the to go to the 我回复mldwyy的2，我是5"
},
],
},
{
"id":"10",
"author":"reply",
"created_at":"2019-2-3",
"content":"我是mldwyy的1，我是6"
},
],
},
{
"id":"11",
"author":"mldwyy二二",
"created_at":"2019-2-2",
"content":"我是第二条评论我是第二条7",
"reply":
[
{
"id":"7",
"author":"mldwyy",
"created_at":"2019-2-3",
"content":"我是mldwyy二二二的7回复，我是8"
},
{
"id":"90",
"author":"reply",
"created_at":"2019-2-3",
"content":"我是mldwyy二二二的7回复，我是9"
},
],
},
{
"id":"67",
"author":"mldwyy三三",
"created_at":"2019-2-2",
"content":"我是第三条评论我是第三条10",
"reply":
[
],
}
],
},显然要把这些数据全部显示在页面上光凭一个v-for和v-if是无法实现的 。我的做法是定义一个模板，然后进行模板的递归调用，模板定义如下
components:{
mycom:{
name:"mycom",
template:'#replyy',
props:['parmsg','index'],
methods: {
showInput:function(j,father) {
//alert(j);
var lists=document.getElementsByClassName("writeBack");
for(var i=0;i
{{-- 此处需要注意模板里面只能有一个根结点，所以必须用大div包起来(!!!此处大坑，没有被包起来会报Error compiling template:- Cannot use v-for on stateful component root element because it renders multiple elements. 以及Multiple root nodes returned from render function. Render function should return a //single root node.）--}}
//子组件渲染父组件传来的回复列表
@{{ item.author }}回复:
删除 回复
@{{ item.content}}@{{ item.created_at }}
//子组件（回复处）判断该回复是否还有回复，如果有再次调用子组件，并把这条回复的reply(即item.reply）传给接下来的子组件供其渲染
调用子组件处代码：
@{{i+1}}楼：@{{ item.author }}删除 回复
@{{ item.content }}@{{ item.created_at }}
//父组件判断评论是否有reply，如果有则调用子组件
最终结果：