Change Like Button - php

Question

I'm working with Lumen, Vuejs and Axios. Users who are signed in can post something, and other users can like and comment on it. What I want to do is to make it obvious that someone liked the post. But I'm not able to switch the button after someone liked it.
This is my Vuejs Code:
<button class="btn btn-light" #click="likes(item.id)"><i class="far fa-heart"></i></button>
<button class="btn btn-light" #click="likes(item.id)"><i class="fas fa-heart"></i></button>
likes(id){
const axiosConfig = {
        headers: {
Authorization: localStorage.getItem('token')
        }
      };
const postData = {
posts_id: id,
likes: true
 };
axios.post('http://lumen.local/like', postData, axiosConfig)
.then(response => {
this.getPosts();
})
.catch(error => {
console.log(error)
});
},
And this is my lumen Code:
$post_query = Posts::with('comments')
->with('comments.owner')
->with('likes.isLiked')
->withCount('likes')
->where('user_id', $user->id)
->orderBy('id', 'desc')
->limit($request->limit)
->get();
I tried to make another function where I can get the user_id of the logged in user, so I can change the button with vue-if
public function checkLike(Request $request)
{
$user_name= $request->username;
$user = User::where('username', $user_name)->first();
$post_id = $request->posts_id;
$post = Posts::find($post_id);
$like = Likes::where('posts_id', $post_id)
->where('user_id', $user->id)
->get();
if(count($like) == 0){
return response()->json('no likes');
} else{
return response()->json($like);
}
}
It worked in postman, but I was not able to implement it in Vuejs, because I could not get the user_id without a v-for. So I thought I should get the user_id in the posts_query but I couldn't do it.
Do you have any ideas?

Answer 1

Based on the details you gave me in the comments, I can suggest you to try this.
(I have not tested it yet so ther might be some syntax errors)
In your Vue script part :
data() {
return {
currentUserId: null,
items: null,
}
},
mounted() {
this.getCurrentUserId()
this.getPosts()
},
methods: {
getCurrentUserId() {
// returns the ID of the current user
},
likes() {
// your method
},
getPosts() {
axios.get(MY_URL)
.then (res => {
const posts = res.data
/*
* creates a new array that contains each post + a boolean that indicates if
* the current user has liked or not.
*/
this.items = posts.map(post => ({
...post,
liked: this.isPostLiked(post.likes)
}))
})
.catch (err => {
console.error(err)
})
},
/*
* Not sure if your likes array is composed like this.
* This method looks for the currentUserId inside the
* likes array passed as an argument. Returns true when
* it finds one, otherwise returns false.
*/
isPostLiked(likesArray) {
likesArray.forEach(like => {
if (like.user_id === this.currentUserId) {
return true
}
}
return false
}
},
Now we should obtain an array of objects that contains each post with its liked state.
Then you only have to loop through it with a v-for in your template:
<div v-if="items !== null" class="like-buttons">
<button
v-for="(item, index) in items"
:key="'item_' + index"
class="btn btn-light"
#click="likes(item.id)"
>
<i v-if="item.liked === true" class="far fa-heart" />
<i v-else class="fas fa-heart" />
</button>
</div>