Issue comunication between component in livewire by Event

Question

Component Search in Layout Template (Component A), code at class component:

public $searchString;

$this->emitTo('admin.supplier.supplier-app', 'getListSupplier', $this->searchString);

Component Supplier full page (Component B), code at class component:

protected $listeners = ['getListSupplier'];

public function getListSupplier($search = '')
{
    if ($search != '')
        dd($search);

    $data = Supplier::where('active', true)
        ->where('name', 'like', '%' . $search . '%')
        ->orderByDesc('id')
        ->paginate(2);

    return $data;
}

public function render()
{
    return view('livewire.admin.supplier.list', [
        'ListSupplier' => $this->getListSupplier()
    ]);
}

Hi everybody. I receive parameter data from Component A -> Component B. But component B not show data new from parameter data Component A. I want when Compoent A (Search) emit event to Component B(List Supplier), Component B reload data and show data.

I tried add value is $refresh into array $listeners. But failure

protected $listeners = ['getListSupplier'=>'$refresh'];

Answer 1

This is because you do not change any properties of the class. in "component B". You should move the pagination into the render() method, or use a computed property.

protected $listeners = ['getListSupplier'];
public $search = '';

public function getListSupplier($search = '')
{
    $this->search = $search;
}

public function render()
{
    $listSupplier = Supplier::where('active', true)
        ->where('name', 'like', '%' . $this->search . '%')
        ->orderByDesc('id')
        ->paginate(2);

    return view('livewire.admin.supplier.list', [
        'ListSupplier' => $listSupplier,
    ]);
}