Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

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

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

2

Answers


  1. 0

    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 e.g. v-model="comment.reply".

    Login or Signup to reply.
  2. 0

    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)"
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search