CODEWITHSUNDEEP
laravel-8laravel-livewirealpine.js
Benny
Benny

Reputation: 460

Having issues passing data with Livewire using 2 components

I would like to pass data from a livewire component A to a Livewire component B. The goal is to open a social icon bar when required.

Here is my setup:

Component 1 class:

<?php

namespace App\Http\Livewire;

use Livewire\Component;


class SocialShareBar extends Component
{
    public $show;
    protected $listeners = ['openSharePopup' => 'openSharePopup'];


    public function mount() {
        $this->show = false;
    }

    public function openSharePopup() {
        $this->show = true;
        $this->emit('openPopup', ['show' => $this->show ]);
    //Hoping to emit to the component B here
    }

    public function render()
    {
        return view('livewire.social-share-bar');
    }

}

Component B:

<?php

namespace App\Http\Livewire;

use Livewire\Component;


class SharePopup extends Component
{
    public $show;
    protected $listeners = ['openPopup' => 'render'];
   //I have hoping to catch the "emit" event here

    public function render()
    {
        return view('livewire.popups.share-popup', ['show'=> true]);
    }

}

One component is in the "app.blade.php" main layout file and the other component is in footer.blade.php of Laravel(which is passed itselt to the app.blade.php file.

Each file residing in its own livewire location: resources\views\livewire\popups\share-popup resources\views\livewire\social-share-bar

I am currently unable to catch the below event in the second component:

 protected $listeners = ['openPopup' => 'render'];

Could the problem be the "protected" scope?

Thanks!

Upvotes: 0

Views: 676

Answers (1)

Qirel
Qirel

Reputation: 26450

In order for the second component to get data from the first component, you have to pass in data from the first components event, and listen for it in the seccond one.

You already pass inn the data from component A here,

$this->emit('openPopup', ['show' => $this->show ]);

So all you need to do is listen for it in component B,

class SharePopup extends Component
{
    public $show;

    protected $listeners = ['openPopup'];

    public function openPopup($show)
    {
        $this->show = $show;
    }

    public function render()
    {
        return view('livewire.popups.share-popup');
    }
}

Then inside the view of component B, if you want to use Alpine, you'd do it like this,

<div x-data="{ show: $wire.entangle('show') }" x-show="show"></div>

Upvotes: 1

Related Questions