Vue中的递归组件js

我使用vue组件来显示注释以及对注释的回复。要显示答复，我只是简单地使用评论组件递归。但是，我收到一个错误。Vue中的递归组件js

这里是我的代码

<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输出。不知道我错在哪里。

来源

2017-07-29 Pritam Bohra

模板中有三个地方引用的数据属性是第三层嵌套属性，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>

来源

2017-07-29 04:56:50 Bert

Vue中的递归组件js

回答

相关问题