J'essaie d'afficher les commentaires de mon enfant dans VueJs et cela me donne une petite erreur

Question

Salut, je viens de commencer à utiliser VueJs et j'ai du mal en même temps. Je développe un projet Laravel + VueJs et je travaille sur un blog et un système de commentaires. Pour cela, j'ai créé une table de commentaires avec un attribut "respond_to_id" qui stockera le "id" du commentaire parent. Puis au niveau VueJs je récupère ces commentaires parents et enfants. Mais le problème vient de l'affichage de VueJ. Comme je réponds uniquement aux sous-commentaires, le dernier commentaire n'apparaîtra pas sous ce sous-commentaire.

C'est le code Vue.Js que j'utilise pour récupérer les commentaires des enfants.

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

Je veux savoir où se trouve l'erreur. S'il vous plaît aidez-moi.

Answer 1

Le problème est que lorsque je réponds à un sous-commentaire, mon commentaire n'apparaît pas en dessous du sous-commentaire.