Child component not rendering new data from parent

#1

What seems to be the problem:
Child component not rendering new data from parent. Only renders on mount.

I have a form wizard that when I hit submit, a new set of fields is displayed.
In a child component I wish to display the data that has been previously submitted.

Please see pseudo code:

// parent.php
class Parent extends Component
{
public $data;

public function mount ()
{

$this->data = model->get_data();

}

public function submit () 
{

// gets the new data after submit
$this->data = model->get_data();

}

public function render ()
{
return view('livewire.parent');
}

// parent.blade
@livewire('child', ['data' => $data]);

// child.php
class Child extends Component
{
public $data;

public function mount($data)
{
$this->data = $data;
}

public function render()
{
return view('livewire.child');
}

// child.blade
@foreach ($this->data as $data)
{{$data}}<br>
@endforeach
#2

When a parent component re-renders, the child components are ignored. It’s easy to assume they would with the new data that you pass in the mount method, but mounting only runs on the initial page load (with some specific exceptions). You need to emit an event from the parent to tell the child to re-render.

Dynamic Nested Components
#3

Thanks @xxdalexx !!
So appreciate all your answers on these forums, always helpful!
I would have thought that sending updated data through to the component would make it re-render.

Got it working.

Interestingly enough, I’m using a computed property and just need to call $render (updated this answer per @xxdalexx’s response below)

// parent
$this->emit('rerenderSidebar');

// child
protected $listeners = ['rerenderSidebar' => '$refresh'];

public function getDataProperty()
{
return $this->model->get_data();
}
#4

I’ve used both and I don’t think there is a difference, but you can do:

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

I know when you call $refresh is just breaks out of the method that calls the method you declare. I don’t know if there’s any consequences of calling render before the component would reach that point on its own or not, and I never ran into anything noticeable, but I’ve been sticking to $refresh just in case.

#5

Thanks @xxdalexx - I’ve updated my answer above.

#6

After speaking to Caleb at a meetup, he does not recommend deeply nested Livewire components.

He recommend for subcomponents to just use Blade components. This removes the event listening / emitting and the subcomponents are reactive to Livewire changes out of the box.

1 Like