How to emit to a specific component

#1

How can I emit to a specific component when I have multiple copies of it in the same page?
I have seen in the doc
Livewire.emitTo(componentName, eventName, ...params) Emit an event to specific component name
but I don’t know how to use in my case.

I have in my main component 50 pairs of radio buttons. The radio buttons are used for the selections of articles I have in my database. The 2 possible radio values are ‘Random’ or ‘Custom’.
If ‘Custom’ is selected, an article selector component is displayed and the selection of the article can then be done, If Random is selected, there is nothing to do

When an article is selected it is via the article selector, it is passed to the main component using emitUp(). That works fine.

My issue arises when I submit the form. I have the validation done in the main component and need to pass its result to the relevant article selector as some may have errors

right now my article selector component is called with

@livewire('admin.homepage-article-selector', ['label' => 'Select article', 'articleUuid' => NULL, 'name' => 'year1_slot1_article', 'key' => "year1_slot1_article"])

but there is nothing differentiating it from the next article selector wich is

@livewire('admin.homepage-article-selector', ['label' => 'Select article', 'articleUuid' => NULL, 'name' => 'year1_slot2_article', 'key' => "year1_slot2_article"])

So, Is there a way to target a specific single component?
and I suppose Is there a way to target exclusively multiple component?

#2

I recommend refactoring so that your validation is done in the article selector (a benefit to components is that they are self-contained/encapsulated functionality). When state in your article selector changes, validate and if required display error messages. Once validation is successful, pass the state of that article component to its parent.

#3

I am okay with that, but I need to know the state of the radio buttons in my parent component. How do I get that data?

#4

Use an event to pass the state to the parent.

As an example, say you have a save function in your article-selector component. The save method is responsible for validation and emitting an event if validation is successful.

For example:

// this is the state/data your component holds
public $state;

public function save()
{
    // validate your data
    $this->validate();

    // fire an event to the parent component
    // send this components state as a parameter
    $this->emitUp('mergeState', $this->state);
}

Then in your parent component, listen for the event and perform some action(s).

// This state property holds the validated state of your article selectors
public $state;

protected $listeners = [
    'mergeState'
];

public function mergeState($state)
{
    // You might add the state to an array or,
    // you might do something else, that is up to you
    $this->state = array_merge($this->state, $state)
}

Your implementation will probably be more complicated, but hopefully you get the basic idea.

#5

@Veleous
I understand your reply but I only have have 1 save button and it is in the main component. I can not have 50 save buttons in my form
I can pass the state of the my article selectors when I select my article. that’s fine.

It feels livewire is missing a trick by not being able to target a function in a targeted nested component

#6

The use of a save button in the nested component was just an example. You could use the lifecycle hooks to trigger a function which performs the same actions.

For example:

class Car extends Component
{
    public $colour = '';

    public function updatedColour()
    {
        $this->validate();

        $this->emitUp('event', $this->colour);
    }
}

You can, use events and listeners.