I'm trying to create a loop that displays blog posts. Within this loop, I have another loop to retrieve the likes for each blog post. My goal is to show an "unlike" button if the authenticated user has liked the blog post, and a "like" button if they haven't. However, the issue is that the main loop is displaying two buttons instead of one when multiple users have liked the same post.
<div class="post" v-show="blogs.length" v-for="blog in blogs" :key="blog.id">
<span v-for="like in blog.likes" :key="like.id">
<span v-if="blog.id === like.blog_id && like.user_id === authUserId">
<a href="#" class="link-black text-sm">
<i class="fas fa-thumbs-down mr-1"></i> UnLike ({{blog.likes.length}})
</a>
</span>
<span v-else>
<a href="#" class="link-black text-sm">
<i class="fas fa-thumbs-up mr-1"></i> Like ({{blog.likes.length}} )
</a>
</span>
</span>
</div>
Can anyone help me figure out what I'm doing wrong?