Livewire 3 wire:click and wire:target on $parent

To address the issue of targeting the correct element for wire:loading when calling a $parent method in Livewire 3, you need to ensure that the wire:target is correctly set to the method being called. However, since you're calling a parent method, you need to make sure that the child component's loading state is correctly managed.

Here's a step-by-step solution:

1. Parent Component: Define the downloadCSV method in your parent component.

// ParentComponent.php
public function downloadCSV($callId)
{
    // Your logic to download CSV
}

2. Child Component: In your child component, you will call the parent method using $parent.

// ChildComponent.php
public function triggerDownloadCSV($callId)
{
    $this->emitUp('downloadCSV', $callId);
}

3. Child Blade View: In your child component's view, set up the button with wire:click and wire:loading directives.

<!-- child-component.blade.php -->
<button wire:click="triggerDownloadCSV({{ $call->call_id }})" wire:loading.attr="disabled">
    Download CSV
</button>
<div wire:loading wire:target="triggerDownloadCSV({{ $call->call_id }})">
    Loading...
</div>

4. Parent Blade View: Ensure the parent component listens for the event emitted by the child component.

<!-- parent-component.blade.php -->
<div>
    @livewire('child-component')

    <script>
        Livewire.on('downloadCSV', callId => {
            @this.downloadCSV(callId);
        });
    </script>
</div>

Explanation:

• Child Component: The triggerDownloadCSV method in the child component emits an event to the parent component using emitUp.
• Child Blade View: The button in the child view uses wire:click to call the triggerDownloadCSV method. The wire:loading directive is used to show a loading state while the method is being processed.
• Parent Blade View: The parent component listens for the downloadCSV event and calls the downloadCSV method with the provided callId.

This setup ensures that the loading state is managed within the child component, and the parent method is called correctly without interfering with the child's loading state.

By following these steps, you should be able to customize the wire:target of the child element to be triggered correctly.