How to receive data from child components?

#1

Hello,

say we have a large form and we want to organize the UI such that the form is divided into many tabs. Like so:

form
form782Ă—596 44.1 KB

Each child form (with its validation logic) is a livewire component. When we hit save the parent component shall collect data from its children and save it to a single model.

How can we design this? I tried using events:

In the parent:

public $listeners = [
   'form.first.update' => 'updatedFirstForm',
   'form.second.update' => 'updatedSecondForm',
];

public function save(): void
{
    $this->emit('submit');
}

In the children:

public $listeners = [
    'submit' 
];

public function submit(): void
{
    $this->emitUp('form.first.update', $this->model);
}

On submit the parent sends an submit event. The children pick it up and send an event back, containing the data. However this approach feels not right. How can the parent wait for all data to arrive and save the model?

How would you solve this? Do you see any alternate design to solve this problem?

#2

In my opinion/how I would tackle it, I would leave it as one livewire component and “consider” it one large form in the eyes of the backend. Then use front end niceties for tab switching and blade components to break up the blade files for each tab.

You can run into syncing issues when trying to use back end tricks with events, session/cache states, etc.

2 Likes