laravel livewire pass data between components

Question

I have two livewire components

First i have a foreach loop

<ul>
    @foreach ($sectors as $sector)
        <li>{{ $sector->name }} <input type="submit" wire:click="showParent({{ $sector->id }})" class="btn btn-sm btn-primary" value="Adicionar"> </li>
        <ul class="mt-2">
        @foreach ($sector->children as $child)
                <li>{{ $child->name }}</li>
        @endforeach
        </ul>
    @endforeach
</ul>

This loop display sector and parent sector, them i have a wire:click to pass data to a event listener. This works fine.

<?php

namespace App\Http\Livewire;

use App\Sector;
use Livewire\Component;

class SectorList extends Component
{
    public $construction;
    public $parent;

    public function mount($construction)
    {
        $this->construction = $construction;

    }

    public function showParent($id){
        $parent = Sector::find($id);
        $this->parent = $parent;
        $this->emit('newParent', $parent->id);
    }

    public function render()
    {
        $sectors = Sector::where('construction_id', $this->construction)->WhereNull('parent_id')->with('children')->get();

        return view('livewire.sector-list', compact('sectors'));
    }
}

Second component

<?php

namespace App\Http\Livewire;

use App\Sector;
use Livewire\Component;


class Sectors extends Component
{
    public $sector_name;
    public $parent_id = '';
    public $construction;
    public $segment;

    protected $listeners = ['newParent' => 'submit'];

    public function mount($construction)
    {
        $this->construction = $construction;

    }

    public function submit($id)
    {
        $this->parent_id = $id;
        //dd($this->parent_id = $id);
        
        $data = [
            'name' => $this->sector_name,
            'parent_id' => $this->parent_id = $id,
            'construction_id' => $this->construction,
            //'segment_id' => $this->segment
        ];
        Sector::Create($data);

    }

    public function render()
    {
        return view('livewire.sectors');
    }


}

the problem here is that when i submit the parent id gets saved as null, when i double click wire:click="showParent({{ $sector->id }})" it gets submitted without the name

    <form wire:submit.prevent="submit">

        <input type="hidden" wire:model="construction" name="construction_id" value="{{ $construction }}">

        <div class="form-group">
            <label for="name">{{ trans('cruds.sector.fields.name') }}</label>
            <input  name="sector_name" id="sector_name" class="form-control" wire:model="sector_name">
            <span class="help-block">{{ trans('cruds.sector.fields.name_helper') }}</span>
        </div>
        <button type="submit" class="btn btn-primary">Salvar</button>
    </form>            
``````
`````
Can someone help??

Thanks

Are you sure that this line is OK: 'parent_id' => $this->parent_id = $id, in your second component’s $data array? — Zollie
This gets me the id of the parent, i had it like in the first component $parent_id =Sector::find($id); $this->parent_id = $parent->id; but it still the same — user2295500
Can you show the markup that shows both of the components together? — Michael

Ricardo Ramos Ricardo Ramos · Accepted Answer · 2021-03-18T12:50:22

The problem is in the SectorList component controller, you don't need to pass the variable $sectors as a view parameter, instead place it as public in the class and declare the value inside the render method this way.

public function render()
    {
        $this->sectors = Sector::where('construction_id', $this->construction)->WhereNull('parent_id')->with('children')->get();

        return view('livewire.sector-list');
    }

laravel livewire pass data between components

1 Answers