如何在 Vue js 中的 v-for 循环中使用 v-model

基洛洛斯维克多

这是我在这里的第一个问题,我真的很绝望,希望你能帮助我。

我正在尝试使用 vuejs 构建像 Facebook 一样的帖子/评论/回复系统,在使用 Axios 获取数据库中的数据(使用 Laravel API)后,我使用 v-for 循环所有帖子/评论/回复,这里的问题是,当我输入我的输入时,我将 v-model 附加到 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>
TEFO

简单的方法是将每个帖子、评论和回复放在单独的组件中,请记住,这是用于的组件,具有单独的状态(或数据),您可以通过这种方式轻松操作它,不仅难以编写扩展而且不可读。

但唯一的方法也是在循环中绑定状态,就像我说的你可以尝试使用计算

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

到:

v-model="replyComputed(index)"

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用Vue.js,如何在v-for循环中使用模式组件?

Vue.js如何在v-for循环中使用单选按钮

如何在 v-for 循环中绑定 vue js 模板中的 css 类?

如何在Vue.js中使用带有嵌套属性的v-model

如何在不使用v-model的情况下检查Vue.JS 2中的单选按钮

如何在Vue.js中的同一元素上使用:value和v-model

Vue 3 - 如何在 v-for 循环中使用注入列表?

如何在Nuxt.js的v-for循环中使用SVG生成<img>?

如何在Vue.js中使用v-for循环嵌套导航?

Vue.js-如何在vue v-for循环中以值2递增索引?

如何在 vue-class 中为 v-model 使用计算属性?

如何在 vue 3 脚本设置中的组件上使用 v-model

如何通过vue.js在v-model的多维JSON中使用动态密钥?

如何在 vue.js 中也从循环外部获取 v-for 循环数据

如何打破vue.js中的v-for循环?

如何在Vue.js中获取v-for索引?

如何在v-if vue js中修剪

如何使用输入字段替换文本中的占位符并使用Vue.js将其与v-model绑定

Vue.js:多个输入中的v-model数组

我该如何在v循环中选择一个元素?(vue.js)

如何在Vue.Js的v-for循环中转义“检测到重复密钥”?

如何在 vue.js 的嵌套 v-for 循环中访问元素的 ref 索引?

在v-for循环中将textarea的v模型绑定到Vue.js中的数组

如何将 v-model 数据传递到 vue.js 中的 URL 路径?

嵌套循环到 v-model Vue JS

如何在 vue.js 中同时使用 v-for 和 source 绑定?

如何在Vue中的v-for循环中console.log一个项目

如何在Vue.js中使用v-repeat创建的选择中预选择当前值?

如何在 Vue 的 v-model 中使用 Bootstrap 按钮组收音机?