Bind to models within an Eloquent Collection don't work correctly

#1

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>
#2

You really need use mount for load select? Bind directly to render:

public function render()
{
return view(‘livewire.admin.product-attributes’, [‘categories’ => Category::whereNull(‘category_id’)->orderBy(‘name’)->with(‘childs’)->get();
}]);
}

#3

Hey, @jzanguei
You don’t need to compact $this->categories in your render method, because in every component load the categories got refreshed, you are already using an accessible public property.

#4

I think same, in this case I would not use initialization by mount because the load is by select a category. It’s my humble opinion jjj

#5

Thank you @prospero and @skywalker, I edited render() method but my problem is not this.
I can not access correctly to input field’s value that created by foreach:

 <input wire:model="attributes.{{$index}}.name" type="text">

After data entry in first input tag, pass data to component, but after data entry in second input tag and data is passed to component, value of first input tag will be equal to null !!! Also as soon as data entry in third input tag, value of first tag and second tag will be equal to null. I access to values by updatedAttributes() method in component.

#6

First check this… ```
wire:mode

and must be wire:model
#7

Excuse me @prospero ! I wrote wrong here. Is in the correct code

 <input wire:model="attributes.{{$index}}.name" type="text">
#8

Yeap. Definitely this isn’t the way. Keep the last change and reload the others to the initial state. Try it not using the updateAttributes and with model.defer and make the dump after made all the inputs entries by submit. Tell me what happen there

#9

Thanks. Against my wishes, I had to use a “Save Attributes” button to pass the value of all the tags to the component.