Hello i made a like/favorites button with Livewire and it works untill you have multiple likes and when you want to unlike/delete, only the last one added is deleted and the others lose their blue color but when you refresh they appear again. How can i solve this?
I tried many things but could not find a solution.
namespace AppHttpLivewire;
use LivewireComponent;
use IlluminateSupportFacadesAuth;
use AppModelsVacature;
use AppModelsFavoriet;
use IlluminateContractsViewView;
use WithPagination;
class Vacatures extends Component
{
public $orderBy = "Sorteer: Nieuwste Vacatures";
public $vacids = [];
public $favoriet;
public $updatePage = false;
public function mount()
{
if(Auth::id()) {
$user = Auth::user();
$this->favoriet = Favoriet::where('user_id',$user->id)->get();
foreach($this->favoriet as $this->favoriet){
$this->vacids[] = $this->favoriet->vacature_id;
}
}
}
public function saveFavoriet($id){
if(Auth::id()) {
$user = Auth::user();
$vacature = Vacature::find($id);
$this->favoriet = new Favoriet;
$this->favoriet->user_id = $user->id;
$this->favoriet->vacature_id = $vacature->id;
$this->favoriet->vacature_naam = $vacature->naam;
$this->favoriet->beschrijving = $vacature->beschrijving;
$this->favoriet->save();
$this->updatePage = false;
$this->mount();
}
else{
return redirect('login')->with('message', 'Log in om je favorieten op te slaan, je kunt ze dan altijd terugvinden in jouw favorieten menu.');
}
}
public function deleteFavoriet()
{
$this->favoriet->delete();
$this->updatePage = true;
}
@if(in_array($vac->id, $this->vacids))
@if($this->updatePage==false)
<div>
<a wire:click.prevent="deleteFavoriet()" class="bi bi-heart-fill fa-lg m-2" href=""
data-tooltip="tooltip" data-placement="top" title="Is al favoriet">
</a>
<div>
</div>
</div>
@else
<div>
<a wire:click.prevent="saveFavoriet({{ $vac['id'] }})" class="bi bi-heart fa-lg m-2" href=""
data-tooltip="tooltip" data-placement="top" title="Voeg toe aan favorieten">
</a>
</div>
@endif
@else
<div>
<a wire:click.prevent="saveFavoriet({{ $vac['id'] }})" class="bi bi-heart fa-lg m-2" href=""
data-tooltip="tooltip" data-placement="top" title="Voeg toe aan favorieten">
</a>
</div>
@endif
<div class="border"></div>
@endforeach
</div>
</div>
@endif
</div>
</section>