Mastering Development

how to stop iterating my like button inside my post

I am working on a post system with likes where the user can toggle the post`s like I have done everything correctly except the last step, the problem inside my v-for loop I fetch likes table from post-like relation(many to many since likes table has user_id and post_id) but it is iterating my button even when I add a condition look here-> duplicated like button, I have tried many things v-if, v-show I think the problem is with my algorithm I hope someone can fix that for me thanks.

<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/' +" class="img-circle avatar" alt="user profile image">
                <div class="pull-left meta">
                    <div class="title h5">
                        <a href="#"><b>  </b></a>

                        made a post.
                    <h6 class="text-muted time"></h6>
            <div class="post-description">
                <div class="stats">
                       <button class="btn btn-default stat-item"  @click.prevent="addLike(">
<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 &&'color: blue;':'color: gray;'"  > Like &nbsp;
</i> <!-- here is the duplicate problem-->
                    <a class="btn btn-default stat-item" @click.prevent>
                        <i class="fa fa-reply-all"> </i> Comments
            <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>


Leave a Reply

Your email address will not be published. Required fields are marked *