Javascript 如何停止在帖子中重复我的“喜欢”按钮
我正在使用likes开发一个post系统,用户可以切换post,就像我已经正确地完成了所有操作一样,除了最后一步,我的v-for循环中的问题我从类似post的关系中获取likes表(多对多,因为likes表有用户id和post id),但它正在迭代我的按钮,即使我添加了一个条件,请看这里->,我已经尝试了很多东西v-if,v-show我想问题在于我的算法,我希望有人能帮我解决,谢谢Javascript 如何停止在帖子中重复我的“喜欢”按钮,javascript,php,laravel,vue.js,v-for,Javascript,Php,Laravel,Vue.js,V For,我正在使用likes开发一个post系统,用户可以切换post,就像我已经正确地完成了所有操作一样,除了最后一步,我的v-for循环中的问题我从类似post的关系中获取likes表(多对多,因为likes表有用户id和post id),但它正在迭代我的按钮,即使我添加了一个条件,请看这里->,我已经尝试了很多东西v-if,v-show我想问题在于我的算法,我希望有人能帮我解决,谢谢 <div class="panel panel-white post panel-shadow" 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 v-bind:src="'img/profile/' + post.user.photo" 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">{{post.created_at | hour}}</h6>
</div>
</div>
<div class="post-description">
<p>{{post.content}}</p>
<div class="stats">
<button class="btn btn-default stat-item" @click.prevent="addLike(post.id)">
<i class="fa fa-thumbs-o-up" aria-hidden="false" style="color: blue" v-for="(like) in post.likes" v-bind:style="like.user_id===id && like.post_id===post.id?'color: blue;':'color: gray;'" > Like {{post.likes.length}}
</i> <!-- here is the duplicate problem-->
</button>
<a class="btn btn-default stat-item" @click.prevent>
<i class="fa fa-reply-all"> {{post.comments.length}}</i> Comments
</a>
</div>
</div>
<comment-input :post="post" :userId="id" :userPhoto="userPhoto"></comment-input>
<ul class="comments-list" v-for="comment in post.comments?post.comments:''">
<comments :comment="comment" :userId="id" :userPhoto="userPhoto"></comments>
</ul>
</div>
<hr>
</div>
</div>
发表了一篇文章。
{{post.created|u在|小时}}
{{post.content}
Like{{post.likes.length}
{{post.comments.length}}comments
不要循环浏览按钮元素,尝试使用此用户喜欢的方法检查当前用户是否喜欢帖子,以便将其绑定到按钮样式:
methods:{
likedBythisUser(post,id){
return post.likes.find(like=>{
return like.user_id===id && like.post_id===post.id;
}) // return a boolean value
}
}
模板:
<button class="btn btn-default stat-item" @click.prevent="addLike(post.id)">
<i class="fa fa-thumbs-o-up" aria-hidden="false" style="color: blue" bind:style="likedBythisUser(post,id)?'color: blue;':'color: gray;'" > Like {{post.likes.length}}
</i> <!-- here is the duplicate problem-->
</button>
Like{{post.likes.length}