Vue jsの再帰コンポーネント

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> 

だ私は、次のエラーを取得しています：私はJSON出力を生成するためにフラクタルを使用していますよう

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

データがオブジェクトで利用可能です。本当にどこが間違っているのか分かりません。

Answer 1

テンプレートには、3番目の階層のネストプロパティであるcomment.channel.data.imageUrl,comment.replies.data、およびcomment.channel.data.nameのデータプロパティを参照する場所が3つあります。

で任意の時間は、comment.channelかcomment.repliesがundefinedある場合は、このエラーが表示されます。

あなたはこのようにそれを守ることができ、応答のために

：comment.channel.data.nameについては

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

あなたは

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

を使用することができます comment.channel.data.imageUrlについて

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

を使用することができます