When I select a category, load attributes and show on page.
Then I change first attributes.{{$index}}.name field’s value but when I change second attributes.{{$index}}.name field’s value, first field’s value returned to default value (no on screen) but by dump.
Are you using the latest version of Livewire: yes
Component code:
class ProductAttributes extends Component
{
public $attributes;
public $categories;
public $categoryId;
protected $rules = [
'attributes.*.name' => 'required|string',
];
public function mount()
{
$this->categories = Category::whereNull('category_id')->orderBy('name')->with('childs')->get();
}
public function render()
{
return view('livewire.admin.product-attributes', ['categories' => $this->categories]);
}
public function updatedCategoryId()
{
$this->attributes = Category::find($this->categoryId)->attributes()->get();
}
public function updatedAttributes()
{
dump($this->attributes);
}
}
Blade file:
<div xmlns:wire="http://www.w3.org/1999/xhtml">
<div class="form-group row my-1 py-1 bg-light">
<label for="category_id" class="col-sm-3 col-form-label">Category</label>
<div class="col-auto" wire:ignore>
<select wire:model="categoryId" class="form-control show-tick" id="category_id" data-size="7" data-container="body" data-live-search="true" title="Select category">
@foreach($categories as $category)
@if(count($category->childs) === 0)
<option value="{{$category->id}}"{{($categoryId==$category->id)?' selected':''}}>{{$category->name}}</option>
@else
@include('admin.categories.subcategorylist-disable-parents',['category' => $category])
@endif
@endforeach
</select>
</div>
<div wire:loading wire:target="categoryId" class="spinner-border spinner-border-sm text-info m-2" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
@isset($attributes)
<div class="border-top">
@foreach ($attributes as $index => $attribute)
<div wire:key="attribute-field-{{$attribute->id}}" class="form-group row my-1 py-1{{$index%2?' bg-light':''}}">
<label class="col-sm-3 col-form-label">{{$attribute->name}}</label>
<div class="col-sm-5">
<input wire:model.debounce.500ms="attributes.{{$index}}.name" type="text" class="form-control">
</div>
</div>
@endforeach
</div>
@endisset
</div>