You could dispatch an Event from component action that should trigger the refresh (you listen for and perform the refresh on the other component that fetches the data).
Jan 15, 2024
4
Level 5
Livewire - best way to refresh data
I would like to know if I use Livewire the best way or is there a better way to refresh the data.
I have a component that calls another component that fetches data from the database and creates datatable.
The base component blade also calls a Form component.
After updating a record, how do I refresh the data in the datatable component?
I do redirect, but is there a better way?
The component:
<?php
namespace App\Livewire\Admin\Box;
use App\Livewire\CrudComponent;
use Jantinnerezo\LivewireAlert\LivewireAlert;
use Livewire\Attributes\On;
use App\Livewire\Admin\Box\BoxForm;
use App\Livewire\Admin\Box\BoxPurchaseForm;
use App\Models\Box;
class BoxComponent extends CrudComponent
{
use LivewireAlert;
public BoxForm $form;
public BoxPurchaseForm $purchaseForm;
public $boxes;
public $showPurchaseForm;
public $view = 'livewire.admin.box.box-component';
public function store()
{
$this->authorize('create', Box::class);
$this->form->store();
$this->alert('success', 'Hurrah!', [
'position' => 'center',
'timer' => 3000,
'toast' => false,
'text' => 'Jobs Done! The box has been created'
]);
$this->redirect(BoxComponent::class);
}
#[On('edit')]
public function edit($id)
{
$box = Box::findOrFail($id);
$this->form->setBox($box);
$this->formTitle = 'Edit';
$this->formAction = 'update';
$this->showForm = true;
}
public function update()
{
$this->authorize('edit', Box::class);
$this->form->update();
$this->alert('success', 'Hurrah!', [
'position' => 'center',
'timer' => 3000,
'toast' => false,
'text' => 'Jobs Done! The box has been updated'
]);
$this->redirect(BoxComponent::class);
}
}
The blade: (this component: <livewire:admin.box.box-table /> called in the tabs, should be refreshed after a box has been updated/created)
<div>
@section('page-title', 'Courier Boxes')
@section('breadcrumbs')
<li class="breadcrumb-item active">Courier Boxes</li>
@stop
@if(!$showForm && !$showPurchaseForm)
<div class="mb-4">
@can('create boxes')
<button wire:click="create" class="btn btn-primary">Create</button>
@endcan
@can('purchase boxes')
<button wire:click="purchase" class="btn btn-primary">Purchase</button>
@endcan
</div>
@endif
@if($showForm)
@include('livewire.admin.box.box-form')
@endif
<x-tabs>
<x-slot:tab_list>
<x-tab-list-item :active="$selectedTab == 0" selectedTab="0" name="Active" href="active-boxes" />
<x-tab-list-item :active="$selectedTab == 1" selectedTab="1" name="Not Active" href="not-active-boxes" />
</x-slot:tab_list>
<x-slot:tab_items>
<div class="tab-pane fade @if($selectedTab == 0) active show @endif" id="active-boxes" role="tabpanel" aria-labelledby="active-boxes">
<livewire:admin.box.box-table active="1" />
</div>
<div class="tab-pane fade @if($selectedTab == 1) active show @endif" id="not-active-boxes" role="tabpanel" aria-labelledby="not-active-boxes">
<livewire:admin.box.box-table active="0" />
</div>
</x-slot:tab_items>
</x-tabs>
</div>
Thank you for your time.
Level 104
1 like
Please or to participate in this conversation.