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
\\
My Answer:
PHP is a server-side scripting language that is commonly used for web development. It can be embedded into HTML code and is often used to create dynamic web pages and applications. PHP stands for Hypertext Preprocessor and is open-source, meaning it is free to use and modify. It is a popular choice for building websites and web applications due to its ease of use and wide range of functionality.
Rate this post
4 of 5 based on 8783 votesComments