Laravel/Livewire/x-components 如何传递数组？

Question

我有一个解决方案，但我认为它很可怕，所以我想问你是否有更好（或更正确）的方法

我需要创建一个<select>，我将在我的应用程序周围的很多地方使用它。这个<select> 是你所期望的：

<select name="xxx">
    <option value="">...</option>
    @foreach ($equipos as $equipo)
        <option value="{{ $equipo->id }}">
            {{ $equipo->equipo }}
        </option>
    @endforeach
</select>

第一次尝试

所以，我的第一次尝试是使用组件<x-select-equipos>，组件视图将是：

<select {{ $attributes->merge(['class' => 'w-full']) }}>
    <option value="">...</option>
    @foreach ($equipos as $equipo)
        <option value="{{ $equipo->id }}">
            {{ $equipo->equipo }}
        </option>
    @endforeach
</select>

所以我想我可以这样称呼这个组件：

<x-select-equipos name="xxx" equipos="{{ $equipos }}" />

但我无法将 $equipos 集合传递给组件。如果我这样做，它只会发送true

第二次尝试

在我的第二次尝试中，我编写了一个 Livewire 组件，但它限制了我使用 Laravel 的 ORM，所以我“渲染”了组件 (.php) 中的所有 <option>s，并将它们显示在 .blade 中。 php

此解决方案的另一个问题是，每次我必须显示 <select> 时，我都必须调用数据库，这是次优的（更多内容见下文）

我的“解决方案”

我有点不喜欢它，但它有效，我创建了一个<x-component> 喜欢：

<div>
    @php
        use App\Models\Equipo;
        $equipos = Equipo::orderBy('nombre')->get();
    @endphp

    <select {{ $attributes->merge(['class' => 'w-full']) }}>
        <option value="">...</option>
        @foreach ($equipos as $equipo)
            <option value="{{ $equipo->id }}">
                {{ $equipo->nombre }}
            </option>
        @endforeach
    </select>
</div>

该解决方案有很多我不喜欢的地方，其中包括每次必须渲染<option> 时都必须进入数据库，我必须在一个屏幕上加载 30 selects或者。虽然记录的数量很少（大约 40 条），但我仍然不喜欢它，因为我觉得它效率很低。

其他可能的解决方案是回到使用“partials”或@include 的 Laravel/PHP 基础知识，这会很好，因为它只会进入数据库一次，事实上我就是这样做的在以前的版本中，我想尝试新方法，使用<x-components> 或LiveWire

我完全确定一定有更好的方法。

Answer 1

但我无法将 $equipos 集合传递给组件。如果我这样做，它只会发送一个 true

$equipos 不是一个雄辩的合集吗？您应该能够将集合传递给您的组件。

如何传递一个集合以及用于指定模型上的哪些字段用于值和标签的道具？

@props([
    'items', 'value', 'label'
])

<select>
    <option value="">{{ __('Please select an option ...') }}</option>
    @foreach ($items as $item)
    <option value="{{ $item->$value }}">{{ $item->$label }}</option>
    @endforeach
</select>

那么您应该可以按如下方式调用您的组件（例如）：

<x-select :items="User::all()" value="id" label="email" />