How to use v-model inside v-for loop in Vue js

Question

this is my first question here, I'm really desperate and I hope you can help me.

I'm trying to build a post/comment/reply system like Facebook by using vuejs, I'm using v-for to loop all posts/comments/replies after I use Axios to fetch data in my database (using laravel API), the problem here that I have input with v-model attached to a form inside my v-for loops when I type in my of my input it appears in all other inputs that has been looped here is an image for better understanding -> duplicate input ,

        <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

the easy way is put every post, comment and reply in separate components remember that's components for, to have separate states(or data) that you can easily manipulate it this way you write not only hard too extends but also its unreadable.

but the only way too bind a state in loop the way i said you can try with computed

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

to:

v-model="replyComputed(index)"

Answer 2

Your problem is that replies.reply is the same for every looped comment. You should bind the reply to the specific comment you currently are iterating over eg v-model="comment.reply" .