Почему входной параметр у вложенного рекурсивного компонента undefined?

Question

[Алексей Скляров]

Реализую систему вложенных комментариев. Возникает проблема с вложенным компонентом comments. Всего существует два компонента:

Comments.vue

<template>
    <div>
        <div class="post__loading" v-if="loading">
            <img src="/assets/images/svg/loading.svg" alt="Загрузка...">
        </div>
        <div v-if="!loading">
            <div class="post__review" v-for="comment in comments" :key="comment.id">
                <comment :comment="comment" />
            </div>          
        </div>

    </div>
</template>

<script>
import Comment from './components/Comment.vue';

export default {
    components: {
        'comment' : Comment,
    },
    data() {
        return {
            comments: [],
            loading:true,
        }
    },
    props: ['post_id'],
    created() {
    },
    mounted(){
    }
}
</script>

Comment.vue

<template>
    <div>        
        <div class="review" :data-id="comment.id" v-if="comment">
            <pre>{{comment}}</pre> 

        <div class="review-replies"  v-if="comment.replies.length">
            Ответы начались
            <div v-for="reply in comment.replies" :key="reply.id">               
                <comment :comment="reply"/>
            </div>
            Ответы кончились
        </div>
    </div>
</template>

<script>
export default {
    name: 'comment',
    data() {
        return {
            user: window.Laravel.user,
            showReplyForm: false,
            reply: null,
        }
    },
    props: {
        comment: Object
    },
    mounted() {

    },
    methods: {
        sendReply() {
        },
        vote(value) {

        }
    },
    filters: {
        toRating(value) {
        }
    }
}
</script>

В Comment.vue первый комментарий отрисовывается правильно, но в блоке:

<div class="review-replies"  v-if="comment.replies.length">
            Ответы начались
            <div v-for="reply in comment.replies" :key="reply.id">               
                <comment :comment="reply"/>
            </div>
            Ответы кончились
        </div>

<comment :comment="reply"/> не рендирится, указывается что reply, который в этом <comment> обрабатывается является undefined. При этом сам reply существует и является объектом, так как при

<div v-for="reply in comment.replies" :key="reply.id">               
                {{reply}}
                <comment :comment="reply"/>
            </div>

{{reply}}выводится. В чем может быть проблема?

Answer 1

[Дмитрий]

так а зачем в компоненте comment пытаться рендерить компонент comment. Мне кажется это так не работает.
я бы навскидку сделал компонент reply и в него уже передавал :reply="reply", итерируя в компоненте comment.

Comments

[Алексей Скляров]

Использую рекурсивный компонент, зачем делать? по той причине что reply, который вы предлагаете вставить вместо comment является таким же комментарием, как и родительский, с такими же данными и методами, и должен обрабатываться так же.

[Дмитрий]

Алексей Скляров, виноват. честно не знал, что так можно...