Why listing of items is empty in calling method of the component?

Question

with livewire 2 I have listing of items ($itemDataRows var) and I need for any item show checkbox ($selectedItems var) and "Select all" button and clicking on this button all items must be selected. I do :

class CrudItems extends Component
{
    private $itemDataRows = [];
    public $selectedItems = [];
    ...

    public function render()
    {
        ...
        $this->itemDataRows   = Item
            ::orderBy('created_at', 'desc')
            ...
            ->paginate($backend_per_page);

        return view('livewire.admin.items.crud-items', [
            'itemDataRows'    => $this->itemDataRows,
            'item_rows_count' => $this->item_rows_count
        ])->layout('layouts.admin');
        }
    }


    public function calcSelectedItemsCount()
    {
        $ret= 0;
        foreach( $this->selectedItems as $next_key=>$next_value ) {
            if($next_value) {
                $ret++;
            }
        }
        return $ret;
    }

    public function selectAllItems()
    {
        $this->selectedItems= [];
        \Log::info(  dump($this->itemDataRows, ' -0 $this->itemDataRows selectAllItems::') );
        // INL OG FILE_I SEE THAT ARRAY ABOVE IS EMPTY!!!
        foreach( $this->itemDataRows as $nextItemDataRow ) {
            $this->selectedItems[$nextItemDataRow->id] = true;
            \Log::info(  dump($this->selectedItems, ' -$this->selectedItems INSIDE selectAllItems::') );
        }
        \Log::info(  dump($this->selectedItems, ' -$this->selectedItems selectAllItems::') );
    }

and in template :

        $selectedItems::{{ var_dump($selectedItems) }}<hr>
        $itemDataRows::{{ $itemDataRows }}
/* $selectedItems is filled ok when I click on checkboxes , but $itemDataRows shows empty var, though I filled items listing below */

  @foreach ($itemDataRows as $item)
    <tr>
      <td class=" whitespace-nowrap  ">
          <x-jet-checkbox id="is_reopen" type="checkbox" class="editor_checkbox_field ml-4" title="On saving editor will be opened"
          wire:model="selectedItems.{{ $item->id }}"/>
     </td>

Is something wrong with definition of $itemDataRows ? Why $itemDataRows is empty in selectAllItems method, but on my template all items are visible ok....

Thanks in advance!

Answer 1

In Livewire you can pass the data via the class variables. And in the mount function you can fill the variable. For Example.

Important Note: The Class Vars must be public!

public $selectedItems = [];

public function mount(): void
{
    $this->selectedItems = ['data' => 'Hello World'];
}

public function render()
{
    return view('livewire.admin.items.crud-items')->layout('layouts.admin');
}

Update

This must have something to do with the Livewire Lifecyle. Every Livewire component goes through a lifecycle. Lifecycle hooks allow you to run code at any stage of the component's lifecycle or before updating certain properties. In your case, use the mount hook.

You initialise the variable itemDataRows in the render function. A request then calls the method selectAllItems. There you have to initialise itemDataRows again, because the state is no longer there during render or mount.

Solution: create a method getItemDataRows()

private getItemDataRows()
{
   $this->itemDataRows => Item::orderBy('created_at', 'desc')
            ...
            ->paginate($backend_per_page);
}

then you can call those in the render method and in the selectAllItems method too.

public function selectAllItems()
{
    $this->selectedItems= [];
    $this->itemDataRows => $this->getItemDataRows();
    ...
    // your code
}