如何在 Vue js 的 v-for 循环中使用 v-model
Posted
技术标签:
【中文标题】如何在 Vue js 的 v-for 循环中使用 v-model【英文标题】:How to use v-model inside v-for loop in Vue js 【发布时间】:2020-07-01 02:41:18 【问题描述】:这是我在这里的第一个问题,我真的很绝望,希望你能帮助我。
我正在尝试使用 vuejs 构建像 Facebook 这样的帖子/评论/回复系统,我使用 v-for 在使用 Axios 获取数据库中的数据后循环所有帖子/cmets/回复(使用 laravel API),这里的问题是,当我输入我的输入时,我输入的 v-model 附加到我的 v-for 循环内的表单中,它出现在所有其他已循环的输入中,这是一个更好理解的图像 - > 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" >
</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" >
</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" >
</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>
【问题讨论】:
尝试在 v-model 中使用索引,例如 v-model="replies[index].reply" 我试过了,效果不好 【参考方案1】:最简单的方法是将每个帖子、评论和回复放在单独的组件中,记住这是用于拥有单独的状态(或数据)的组件,您可以通过这种方式轻松操作它,这样您不仅难以扩展而且难以阅读。
但唯一的方法是像我说的那样在循环中绑定一个状态,你可以尝试使用计算
v-model="replies[index].reply"
到:
v-model="replyComputed(index)"
【讨论】:
【参考方案2】:您的问题是replies.reply
对于每个循环评论都是相同的。您应该将回复绑定到您当前正在迭代的特定评论,例如v-model="comment.reply"
.
【讨论】:
我将我的回复绑定到评论,当我点击发送时,后端一切正常当我开始输入模型时,它会出现在我的 v-for 循环中的每个输入中 出于同样的原因,它在视觉上是相同的,您的 v-model 在每个输入中都绑定到相同的回复。您应该为每条评论添加一个属性,就像输入的占位符一样,您可以稍后删除它,或者按照@TEFO 的建议使用索引。以上是关于如何在 Vue js 的 v-for 循环中使用 v-model的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Vue.js 的嵌套 v-for 循环中使用 v-html 有条件地渲染原始 HTML?
如何使用 Vue.js 将 DataTable() 与数组中的数据(v-for 循环)附加到现有的 HTML <table>?