I created a "Like" functionality that is able to favorite a post (I know because I checked Favorite Table in DB after clicking "Like"). But after I hit the button, the button description stays the same rather than change to "Unlike" i.e the "Like" text persists after clicking the button. Currently, the state/button-text changes only after I manually reload/refresh the page. Please, I need help to make button state change when clicked, without having to manually refresh page. Many thanks.
\\
**Model Post.php** -> contains method to check if post is favorited or not
public function favorited()
{
return (bool) Favorite::where('user_id', Auth::id())
->where('post_id', $this->id)
->first();
}
**Model User.php**
public function favorites()
{
return $this->belongsToMany(Post::class, 'favorites', 'user_id',
'post_id')->withTimeStamps();
}
**Controller**
<?php
namespace App\Http\Controllers;
use App\Models\User;
use App\Models\Post;
use Illuminate\Support\Facades\Auth;
use Illuminate\Http\Request;
class FavoriteController extends Controller
{
public function __construct(){
$this->middleware('auth');
}
public function store(User $user, $post){
return auth()->user()->favorite_list()->toggle($post->favorites);
}
public function favoritePost(Post $post)
{
Auth::user()->favorites()->attach($post->id);
return back();
}
public function unFavoritePost(Post $post)
{
Auth::user()->favorites()->detach($post->id);
return back();
}
}
**FavoriteButton.Vue Component**
<template>
<span>
<a href="#" v-if="isFavorited" class="btn btn-success" @click.prevent="unFavorite(post)">
Like
</a>
<a href="#" v-else @click.prevent="favorite(post)" class="btn btn-success">
Unlike
</a>
</span>
</template>
<script>
export default {
props: ['post', 'favorited'],
mounted() {
this.isFavorited = this.isFavorite ? true : false;
},
computed: {
isFavorite() {
return this.favorited;
},
},
data: function() {
return {
isFavorited: '',
}
},
methods: {
favorite(post) {
axios.post('/favorite/'+post)
.then(response => this.isFavorited = true)
.catch(response => console.log(response.data));
},
unFavorite(post) {
axios.post('/unfavorite/'+post)
.then(response => this.isFavorited = false)
.catch(response => console.log(response.data));
}
}
}
</script>
**HTML**
@foreach($posts as $post)
<div class="container">
<div style="" class="container">
<h5 style="display: inline">Status: </h5>
<h6 style="display: inline">{{$post->batch_no}}</h6>
</div>
<favorite-button
:post="{{ $post->id }}"
:favorited="{{ $post->favorited() ? 'true' : 'false' }}"
></favorite-button>
</div>
@endforeach
\\
