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

回答

相關問題