Livewire scripts configured but events not triggered

Question

I have 3 main layouts and i configured the livewire scripts accordingly. It all works in a separate component function. I duplicated the component for my needs by creating a new component by terminal.

This component emits an event to the parent component with a $this->emitUp('listener') and it is not triggered like in the other component.

//first component

protected $listeners = ['paymentSuccessSingle'];

public function render()
{
 return view('livewire.unlock-contact')
     ->layout('layouts.app');
}

public function paymentSuccessSingle($job_id)
{
   Log::info('payment done');
   $this->unlockContact = true;
}

//component 2
protected $listeners = ['paymentSuccessSingleJob'];

public function render()
{
    return view('livewire.unlock-job');
}

public function paymentSuccessSingleJob($job_id)
{
    Log::info('payment done');
    $this->unlockJob = true;
}

component 2 is not working and component 1 works. What am i doing wrong ?

Answer 1

You forgot to define the layout in the 2nd component.

public function render()
{
    return view('livewire.unlock-job')
      ->layout('layouts.app');
}

If you didn't define where this script is going to be hosted, livewire doesn't understand what you are trying to say. The docs