Javascript Vue js中的递归组件

我使用vue组件来显示评论以及对评论的回复。为了显示回复，我只是递归地使用comment组件。然而，我得到了一个错误

这是我的密码

<template>
    <div class="box">
        <article class="media">
            <figure class="media-left">
                <p class="image is-64x64">
                    <img :src="comment.channel.data.imageUrl">
                </p>
            </figure>
            <div class="media-content">
                <div class="content">
                    <p>
                        <strong><a :href="channelUrl">{{ comment.channel.data.name }}</a></strong> <small>{{ comment.created_at_human }}</small>
                        <br>
                        <p class="is-medium">{{ comment.body }}</p>
                        <nav class="level is-mobile">
                            <div class="level-left">
                                <a class="level-item">
                                    <span class="icon is-small"><i class="fa fa-comment-o"></i></span>
                                </a>
                            </div>
                        </nav>
                    </p>
                </div>
            </div>
        </article>
       <comment v-for="reply in comment.replies.data" :comment="reply" :key="reply.id"></comment>
</div>

{{comment.created_at_human}}


{{comment.body}

我得到以下错误：

[Vue warn]: Error in render function: "TypeError: Cannot read property 'data' of undefined"

found in

---> <Reply> at /home/vagrant/Laravel/youtube/resources/assets/js/components/Comment.vue... (1 recursive calls)
       <VideoComments> at /home/vagrant/Laravel/youtube/resources/assets/js/components/VideoComments.vue
         <VideoPlayerLayout> at /home/vagrant/Laravel/youtube/resources/assets/js/components/VideoPlayerLayout.vue
           <Root>

[Vue warn]：呈现函数中出现错误：“TypeError:无法读取未定义的属性“data”
发现于
--->在/home/vagrant/Laravel/youtube/resources/assets/js/components/Comment.vue。。。（1个递归调用）
at/home/vagrant/Laravel/youtube/resources/assets/js/components/VideoComments.vue
at/home/vagrant/Laravel/youtube/resources/assets/js/components/VideoPlayerLayout.vue

---

数据在对象中可用，因为我正在使用分形生成json输出。我真的不知道我错在哪里。

模板中有三个地方引用了作为第三层嵌套属性的数据属性，

comment.channel.data.imageUrl

，

comment.repress.data

和

comment.channel.data.name

如果在任何时候，

comment.channel

或

comment.repress

是

未定义的

，您将看到此错误

对于回复，您可以这样保护它：

<template v-if="comment.replies">
  <comment v-for="reply in comment.replies.data" :comment="reply" :key="reply.id"></comment>
</template>

对于

comment.channel.data.imageUrl

，您可以使用

{{comment.channel && comment.channel.data && comment.channel.data.name }}

<p v-if="comment.channel && comment.channel.data" class="image is-64x64">
  <img :src="comment.channel.data.imageUrl">
</p>