Question

我使用vue组件来显示注释以及对注释的回复。要显示回复，我只是递归地使用注释组件。但是，我收到了一个错误。

这是我的代码

<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>

我收到以下错误：

[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>

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

Answer 1

模板中有三个位置引用的数据属性是第三层嵌套属性comment.channel.data.imageUrl，comment.replies.data和comment.channel.data.name。

如果任何时间，comment.channel或comment.replies为undefined，您将看到此错误。

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

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

对于comment.channel.data.name，您可以使用

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

对于comment.channel.data.imageUrl，您可以使用

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

Vue中的递归组件

1 个答案: