Recursive components in Vue js

Question

I using vue components to display comments as well as replies to the comments. To display the replies I am simply using comment component recursively. however, I am getting an error.

Here's my code

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

I am getting the following error:

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

Data is available in the object as I am using fractal to generate json output. Don't really know where am I going wrong.

Bert · Accepted Answer · 2017-07-29 04:56:50Z

2

There are three places in the template where you are referencing a data property that is a third tier nested property, comment.channel.data.imageUrl, comment.replies.data, and comment.channel.data.name.

If at any time, comment.channel or comment.replies is undefined, you will see this error.

For the replies you could guard it this way:

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

For comment.channel.data.name you could use

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

For comment.channel.data.imageUrl you could use

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

answered Jul 29, 2017 at 4:56

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Recursive components in Vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related