I'm trying to display my child comments in VueJs and it's giving me a small error

Question

Hi, I've just started using VueJs and I'm having a hard time. I'm developing a Laravel VueJs project and working on a blogging and commenting system. For this, I created a comments table with a "respond_to_id" attribute that will store the "id" of the parent comment. Then at VueJs level I retrieve these parent and child comments. But the problem is with VueJs display. Since I only reply to sub-comments, the last comment will not show up below that sub-comment.

This is the Vue.Js code I use to retrieve the child comments.

<div
                v-for="(commentaire, i) in commentaires"
                :key="i"
                v-if="commentaires.length"
              >
                <div id="comment-1" class="comment">
                  <div class="d-flex">
                    <div class="comment-img">
                      <img v-bind:src="commentaire.photo" alt="" />
                    </div>
                    <div>
                      <h5>
                        <a href="">{{ commentaire.name }}</a>
                        <a @click="repondre(commentaire)" class="reply"
                          ><i class="bi bi-reply-fill"></i> répondre</a
                        >
                      </h5>
                      <time datetime="2020-01-01"
                        >il y a {{ format(commentaire.created_at) }}</time
                      >
                      <p>
                        {{ commentaire.contenu }}
                      </p>
                    </div>
                  </div>
                </div>
                <!-- End comment #1 -->

                <div
                  id="comment-reply-1"
                  class="comment comment-reply"
                  v-for="child in commentaire.children"
                  :key="child.id"
                  v-bind:commentaire="child"
                >
                  <div class="d-flex">
                    <div class="comment-img">
                      <img v-bind:src="child.photo" alt="" />
                    </div>
                    <div>
                      <h5>
                        <a href="">{{ child.name }}</a>
                        <a @click="repondre(child)" class="reply"
                          ><i class="bi bi-reply-fill"></i> répondre</a
                        >
                      </h5>
                      <time datetime="2020-01-01">{{
                        format(child.created_at)
                      }}</time>
                      <p>
                        {{ child.contenu }}
                      </p>
                    </div>
                  </div>
                  <!-- End comment reply #2-->
                </div>
              </div>

I want to know where the error lies. please help me.

Answer 1

The problem is that when I reply to a sub-comment, my comment doesn't show up below the sub-comment.