为什么在组件的调用方法中项目列表为空？

Question

使用 livewire 2 我有项目列表（$itemDataRows var），我需要任何项目显示复选框（$selectedItems var）和 “Select 全部”按钮并单击此按钮必须选择所有项目。我愿意 :

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::') );
    }

并在模板中：

        $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>

$itemDataRows 的定义有问题吗？为什么在 selectAllItems 方法中 $itemDataRows 为空，但在我的模板上所有项目都可见 ok....

提前致谢！

Answer 1

在 Livewire 中，您可以通过 class 变量传递数据。在 mount 函数中，您可以填充变量。例如。

重要提示： Class 变量必须是 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');
}

更新

这一定和Livewire Lifecyle有关。每个 Livewire 组件都会经历一个生命周期。生命周期挂钩允许您运行在组件生命周期的任何阶段或更新某些属性之前进行编码。在你的情况下，使用挂载挂钩。

您在渲染函数中初始化变量 itemDataRows。然后请求调用方法 selectAllItems。在那里你必须再次初始化 itemDataRows，因为状态在渲染或装载期间不再存在。

解决方法： 创建方法 getItemDataRows()

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

然后您也可以在 render 方法和 selectAllItems 方法中调用它们。

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

为什么在组件的调用方法中项目列表为空？

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

laravel-livewire

更新