I have a full page livewire component and I'm doing crud with a single modal, I'm creating variation for a product and variation has multiple values so in that case, I created a one to many relations between Variation
and VariationValue
. When I create there have no problem but when I want to update there have a problem, my multiple inputs have an index
value not showing properly inside inputs, if I doing like $value->value
then I see the proper value inside inputs, but I can't update or delete them until if I have no id
.
I want that user can update and delete and also add more fields as they wish, but my problem I can't show the proper value inside inputs and can't grab the id
to delete from db
, I'm trying to do with $editMode
like wire:model.defer="{{ $editMode ? $values[$key]->value : 'values.'.$key }}"
but it does not work, it just shows me the value inside wire:model.defer="value"
when I inspect the element. How can I do this for update and delete also for new values, I searched a lot but no result found, below the image you can see that there have [object Object]
inside those inputs not showing the proper values.
When $editMode = true
it's showing me like this
In my modal blade
<div class="col-12">
<fieldset>
<label>Variation values *</label>
@foreach ($moreValues as $key => $value)
<div class="{{ $loop->last ? '' : 'mb-2' }}" wire:key="{{ $key }}">
<div class="input-group">
<input type="text"
wire:model.defer="values.{{ $key }}"
class="form-control"
placeholder="Variation value">
<div class="input-group-append">
@if ($loop->index === 0)
<button wire:click.prevent="addRowForValue"
class="btn btn-primary font-size-large" type="button">
+
</button>
@else
<button wire:click.prevent="removeRowForValue({{ $key }})"
class="btn btn-danger font-size-large" type="button">
-
</button>
@endif
</div>
</div>
@error("values.{{ $key }}")
<span class="text-danger font-size-base">{{ $message }}</span>
@enderror
</div>
@endforeach
</fieldset>
</div>
In my Component
<?php
namespace App\Http\Livewire\Products\Variations;
use App\Models\Variation;
use Livewire\Component;
class Index extends Component
{
public $moreValues = [0];
public $editMode = false;
public $name, $values = [];
protected $rules = [
'name' => 'required|string',
'values.*' => 'required|string',
];
public function addRowForValue()
{
$this->moreValues[] += 1;
}
public function removeRowForValue($key)
{
unset($this->moreValues[$key]);
}
public function store()
{
$this->validate();
$variation = Variation::create([
'name' => $this->name
]);
foreach ($this->values as $key => $value) {
$variation->values()->create([
'value' => $this->values[$key]
]);
}
session()->flash('message', 'Unit create successfully.');
$this->clearForm();
}
/**
* @param $id
*/
public function edit($id)
{
$this->editMode = true;
$this->moreValues = [0];
$this->resetErrorBag();
$this->clearForm();
// fill the form here with data
$variation = Variation::query()->findOrFail($id);
$this->name = $variation->name;
$this->values = [];
foreach ($variation->values as $key => $value) {
// incrementing input by value
$this->moreValues[$key] = $value;
// showing value their own field
$this->values[$key] = $value;
}
$this->emit('openModal');
}
protected function clearForm()
{
$this->name = '';
$this->values = '';
}
public function render()
{
$variations = Variation::with('values')->latest('id')->get();
return view('livewire.products.variations.index', compact('variations'))
->extends('layouts.app');
}
}