How to trigger an event listener only on button click

I am able to emit and display an event listener from child to parent. However, I want the item to be displayed ONLY when clicked upon by the parent's Click Me button.

Here is my child view:

	<input type="radio" wire:click="EmitUp('{{ $name->id }}')" />

My child controller:

public $Date;

public function EmitUp($product) {
	// This is what triggers going from child to parent
	$this->dispatch('BubbledEvent', Date: $product);
}

My Parent View:

// This gets any time I click on any radio in the child componet
        @if (session('bubble'))
                <div class="alert alert-success">
                        {{ session('bubble') }}
                </div>
        @endif

	// I only want the id to be shown if the user clicks the Click me button
	<button wire:click="ShowResult">Click me</button>

My Parent controller:

public $Date;

#[On('BubbledEvent')]
// This triggers the id to be shown via childs radio btn, whether or not Click Me btn is clicked
public function ShowResult($Date) {
	session()->flash('bubble', "$Date");
}

How can I listen for the event only if the Click me (Parent button) is clicked instead of it just automatically showing?

Jdubstep1357

2 years ago

Level 2

I figured it out! By using sessions, I can pass the data in between different functions.

Here is my code:

#[On('BubbledEvent')]
    public function ShowResult($Date) {
    session()->flash('bubble', "$Date");
    // bubbleShow gets passed into display button
    Session::put('bubbleShow', "$Date");
    }

    public function Display() {

        session()->flash('Course_Added', 'Course Added');

        // bubbleShow is from child to parent event
        $Products = new Date_ProductModel;
        $Products->Date_ID = session('bubbleShow');
        $Products->save();
    }

Please or to participate in this conversation.