Hi i’m kind of new to livewire, but i’m loving it.
I have two components, one displays a list of records inside a foreach and the other add the data for each item in the loop.
My problem is that the data only is added in the first item of the loop.
here is my code:
namespace App\Http\Livewire;
use App\Step;
use Livewire\Component;
class Steps extends Component
{
public $segment;
public function mount($segment)
{
$this->segment = $segment;
}
public function render()
{
return view('livewire.steps',[
'steps' => Step::where('segment_id', $this->segment)->get()
]);
}
}
blade
<div>
<ul class="list-group">
@foreach ($steps as $step)
<li class="list-group-item d-flex justify-content-between align-items-center">
{{ $step->name }}
<input type="button" wire:click.prevent="$emit('getItem',{{$step->id}})" class="btn btn-sm btn-success" value="Adicionar" data-toggle="modal" data-target="#compositionModal">
</li>
@livewire('items', ['step' => $step->id])
@endforeach
</ul>
</div>
Second component:
namespace App\Http\Livewire;
use App\Item;
use Livewire\Component;
class Items extends Component
{
public $search;
public $code;
public $step;
public $items = [];
protected $listeners = ['getItem'];
public function mount()
{
$this->search = request()->query('search', $this->search);
}
public function getItem($step_id)
{
$this->step = $step_id;
}
public function addItem($id )
{
$code = Item::find($id);
//dd($this->$code);
$this->code = $code;
$this->items[] = [
'step_id' => $this->step,
'id' => $code->id,
'source' => $code->source,
'code' => $code->code,
'type' => $code->type,
'description' => $code->description,
'unit' => $code->unit,
'qtd' => $code->unit,
'price' => $code->price,
'total' => $code->total,
];
}
public function render()
{
return view('livewire.items',[
'composition' => Item::search($this->search)
]);
}
}
Blade
<table class="table table-bordered">
<thead>
<td>Item</td>
<td>Base</td>
<td>Código</td>
<td>Descrição</td>
<td>Un</td>
<td>Qtde</td>
<td>Total</td>
<td>Ações</td>
</thead>
<tbody>
@if (count($items) > 0)
@foreach($items as $line)
<tr>
<td class="p-0">{!! $line['step_id'] !!}</td>
<td class="p-0"><input name="composition[{{ $loop->index }}][code]" type="hidden" value="{!! $line['code'] !!}"><input name="composition[{{ $loop->index }}][id]" type="hidden" value="{!! $line['id'] !!}" ><input class="border-0 p-0" size="7" name="composition[{{ $loop->index }}][source]" value="{!! $line['source'] !!}" readonly></td>
<td class="p-0"><input class="border-0 p-0" size="11" name="composition[{{ $loop->index }}][fonte]" value="{!! $line['type'] !!}" readonly></td>
<td class="p-0">{!! $line['code'] !!}</td>
<td class="p-0"><input class="border-0 p-0" size="22" name="composition[{{ $loop->index }}][description]" value="{!! $line['description'] !!}" readonly></td>
<td class="p-0"><input class="border-0 p-0" size="2" name="composition[{{ $loop->index }}][unit]" value="{!! $line['unit'] !!}" readonly></td>
<td class="p-0"><input class="qtd" size="6" name="composition[{{ $loop->index }}][qtd]" value=""></td>
<td class="p-0">R$ <input class="border-0 p-0 price" size="6" name="composition[{{ $loop->index }}][price]" value="{!! $line['total'] !!}"></td>
<td class="p-0">R$ <input class="border-0 p-0 total" size="6" name="composition[{{ $loop->index }}][total]" value="" readonly></td>
</tr>
@endforeach
@endif
</tbody>
</table>
</div>
This is a include inside the component, this is how i add the item to array
<div wire:ignore.self class="modal" id="compositionModal" tabindex="-1" role="dialog" aria-labelledby="compositionModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Adicionar Composição</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input wire:model="search" type="text" class="form-control" placeholder="Search" />
<input wire:model="supply" type="hidden" class="form-control" value="supply" />
<table class="table table-bordered" style="margin: 10px 0 10px 0;">
<tr>
<th>Codigo</th>
<th>Descricao</th>
<th>Un</th>
<th>Total</th>
<th>Selecionar</th>
</tr>
<tbody class="tabela" >
@foreach($composition as $item)
<tr>
<td>{{ $item->code }}</td>
<td>{{ $item->description }}</td>
<td>{{ $item->unit}}<td>
<td>R$ {{ $item->total }}</td>
<td><input type="submit" wire:click.prevent="addItem({{$item->id}})" class="btn btn-sm btn-primary" value="Adicionar"></td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
If anyone can help… Thanks