Как использовать v-модель внутри v-for l oop in Vue js

Question

это мой первый вопрос здесь, я действительно в отчаянии, и я надеюсь, что вы можете мне помочь.

Я пытаюсь создать систему постов / комментариев / ответов, такую ​​как Facebook, используя vuejs, Я использую v-for для l oop всех постов / комментариев / ответов после того, как я использую Ax ios для извлечения данных из моей базы данных (используя laravel API), проблема здесь в том, что у меня есть ввод с v-моделью прикрепленный к форме внутри моих циклов v-for, когда я набираю свои входные данные, он появляется во всех других зацикленных входных данных - это изображение для лучшего понимания -> дублированный ввод ,

        <div class="panel panel-white post panel-shadow" v-for="(post) in posts" >
            <div class="post-heading">
                <div class="pull-left image">
                    <img src="https://bootdey.com/img/Content/user_1.jpg" class="img-circle avatar" alt="user profile image">
                </div>
                <div class="pull-left meta">
                    <div class="title h5">
                        <a href="#"><b>{{post.user.name}}  </b></a>

                        made a post.
                    </div>
                    <h6 class="text-muted time">(number) minute ago</h6>
                </div>
            </div>
            <div class="post-description">
                <p>{{post.content}}</p>
                <div class="stats">
                    <a href="#" class="btn btn-default stat-item">
                        <i class="fa fa-thumbs-up icon"></i>2
                    </a>
                    <a href="#" class="btn btn-default stat-item">
                        <i class="fa fa-share icon"></i>12
                    </a>
                </div>
            </div>
            <div class="post-footer">
                <form>
                    <div class="input-group">
                        <input  type="text" name="comment" class="form-control" v-model.lazy="comments.comment" :class="{ 'is-invalid': comments.errors.has('comment') }" required="required" autocomplete="off">
                        <has-error  :form="comments" field="comment"></has-error>
                        <span class="input-group-addon">
                                    <button type="submit" class="fa fa-send form-control"  @click.prevent="addComment(post.id)" >Send</button>
                    </span>
                    </div>
                </form>
                <ul class="comments-list" v-for="(comment) in post.comments?post.comments:''">
                    <li class="comment" >
                        <a class="pull-left" href="#">
                            <img class="avatar" src="https://bootdey.com/img/Content/user_1.jpg" alt="avatar">
                        </a>
                        <div class="comment-body">
                            <div class="comment-heading">
                                <h4 class="user">{{comment.user?comment.user.name:"-"}}</h4>
                                <h5 class="time">(number) minutes ago</h5>
                            </div>
                            <p>{{comment.comment}}</p>
                            <form>
                                <div class="input-group">
                                    <input type="text" name="reply" class="form-control" v-model="replies.reply" :class="{ 'is-invalid': replies.errors.has('reply') }" required="required" autocomplete="off">
                                    <has-error  :form="replies" field="reply"></has-error>
                                    <span class="input-group-addon">
                                    <button type="submit" class="fa fa-send form-control"  @click.prevent="addReply(comment.id)" >Send</button>
                    </span>
                                </div>
                            </form>
                        </div>
                        <ul class="comments-list" v-for="reply in comment.reply?comment.reply:''">
                            <li class="comment">
                                <a class="pull-left" href="#">
                                    <img class="avatar" src="https://bootdey.com/img/Content/user_3.jpg" alt="avatar">
                                </a>
                                <div class="comment-body">
                                    <div class="comment-heading">
                                        <h4 class="user">{{reply.user.name}}</h4>
                                        <h5 class="time">(number) minutes ago</h5>
                                    </div>
                                    <p>{{reply.reply}}</p>

                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

Answer 1

простой способ поместить каждое сообщение, комментарий и ответ в отдельные компоненты, помните, что это компоненты, для того, чтобы иметь отдельные состояния (или данные), которыми вы можете легко манипулировать, так как вы пишете не только слишком сложно, но и нечитаемо.

но единственный способ связать состояние в l oop так, как я сказал, можно попробовать с вычисленным

v-model="replies[index].reply"

до:

v-model="replyComputed(index)"

Answer 2

Ваша проблема в том, что replies.reply одинаково для каждого зацикленного комментария. Вы должны связать ответ с указанным c комментарием, который вы сейчас перебираете, например, v-model="comment.reply".