如何在Vue js的v-for循环内使用v-model [英] 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.

我正在尝试使用vuejs构建类似于Facebook的帖子/评论/回复系统，在使用Axios提取数据库中的数据后，我正在使用v-for循环所有帖子/评论/回复(使用laravelAPI)，这里的问题是，当我输入自己的输入时，我在v-for循环中的表单上附加了带有v-model的v模型，它出现在此处已循环的所有其他输入中是一个更好理解的图像-> 重复输入，

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>

推荐答案

最简单的方法是将每个帖子，评论和回复放在单独的组件中，记住该组件的组成部分具有独立的状态(或数据)，您可以轻松地对其进行操作这样，您不仅写得太难，而且难以理解.

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"

收件人:

v-model="replyComputed(index)"

这篇关于如何在Vue js的v-for循环内使用v-model的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！