title: How to use v-model inside v-for loop in Vue js
body: <p>this is my first question here, I'm really desperate and I hope you can help me.</p>
  
  <p>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 -> <a href="https://i.stack.imgur.com/b1llI.jpg" rel="nofollow noreferrer">duplicate input</a>,</p>
  
  <pre><code>        &lt;div class="panel panel-white post panel-shadow" v-for="(post) in posts" &gt;
              &lt;div class="post-heading"&gt;
                  &lt;div class="pull-left image"&gt;
                      &lt;img src="https://bootdey.com/img/Content/user_1.jpg" class="img-circle avatar" alt="user profile image"&gt;
                  &lt;/div&gt;
                  &lt;div class="pull-left meta"&gt;
                      &lt;div class="title h5"&gt;
                          &lt;a href="#"&gt;&lt;b&gt;{{post.user.name}}  &lt;/b&gt;&lt;/a&gt;
  
                          made a post.
                      &lt;/div&gt;
                      &lt;h6 class="text-muted time"&gt;(number) minute ago&lt;/h6&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="post-description"&gt;
                  &lt;p&gt;{{post.content}}&lt;/p&gt;
                  &lt;div class="stats"&gt;
                      &lt;a href="#" class="btn btn-default stat-item"&gt;
                          &lt;i class="fa fa-thumbs-up icon"&gt;&lt;/i&gt;2
                      &lt;/a&gt;
                      &lt;a href="#" class="btn btn-default stat-item"&gt;
                          &lt;i class="fa fa-share icon"&gt;&lt;/i&gt;12
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="post-footer"&gt;
                  &lt;form&gt;
                      &lt;div class="input-group"&gt;
                          &lt;input  type="text" name="comment" class="form-control" v-model.lazy="comments.comment" :class="{ 'is-invalid': comments.errors.has('comment') }" required="required" autocomplete="off"&gt;
                          &lt;has-error  :form="comments" field="comment"&gt;&lt;/has-error&gt;
                          &lt;span class="input-group-addon"&gt;
                                      &lt;button type="submit" class="fa fa-send form-control"  @click.prevent="addComment(post.id)" &gt;Send&lt;/button&gt;
                      &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
                  &lt;ul class="comments-list" v-for="(comment) in post.comments?post.comments:''"&gt;
                      &lt;li class="comment" &gt;
                          &lt;a class="pull-left" href="#"&gt;
                              &lt;img class="avatar" src="https://bootdey.com/img/Content/user_1.jpg" alt="avatar"&gt;
                          &lt;/a&gt;
                          &lt;div class="comment-body"&gt;
                              &lt;div class="comment-heading"&gt;
                                  &lt;h4 class="user"&gt;{{comment.user?comment.user.name:"-"}}&lt;/h4&gt;
                                  &lt;h5 class="time"&gt;(number) minutes ago&lt;/h5&gt;
                              &lt;/div&gt;
                              &lt;p&gt;{{comment.comment}}&lt;/p&gt;
                              &lt;form&gt;
                                  &lt;div class="input-group"&gt;
                                      &lt;input type="text" name="reply" class="form-control" v-model="replies.reply" :class="{ 'is-invalid': replies.errors.has('reply') }" required="required" autocomplete="off"&gt;
                                      &lt;has-error  :form="replies" field="reply"&gt;&lt;/has-error&gt;
                                      &lt;span class="input-group-addon"&gt;
                                      &lt;button type="submit" class="fa fa-send form-control"  @click.prevent="addReply(comment.id)" &gt;Send&lt;/button&gt;
                      &lt;/span&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                          &lt;ul class="comments-list" v-for="reply in comment.reply?comment.reply:''"&gt;
                              &lt;li class="comment"&gt;
                                  &lt;a class="pull-left" href="#"&gt;
                                      &lt;img class="avatar" src="https://bootdey.com/img/Content/user_3.jpg" alt="avatar"&gt;
                                  &lt;/a&gt;
                                  &lt;div class="comment-body"&gt;
                                      &lt;div class="comment-heading"&gt;
                                          &lt;h4 class="user"&gt;{{reply.user.name}}&lt;/h4&gt;
                                          &lt;h5 class="time"&gt;(number) minutes ago&lt;/h5&gt;
                                      &lt;/div&gt;
                                      &lt;p&gt;{{reply.reply}}&lt;/p&gt;
  
                                  &lt;/div&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>