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> ，並將它們顯示在 the.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>時將 go 寫入數據庫，在一個屏幕上我必須加載 30 個左右的selects 。 雖然記錄的數量非常少（大約 40 條），但我仍然不喜歡它，因為我覺得它效率很低。

其他可能的解決方案是 go 回到將使用“部分”或@include的 Laravel/PHP 基礎，這會很好，因為它只會 go 到數據庫一次，事實上這就是我在以前版本中所做的方式，我想嘗試新方法，使用<x-components>或LiveWire

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

Answer 1

但我不能將 $equipos 集合傳遞給組件。 如果我這樣做，它只會發送一個真實的

$equipos不是 eloquent 集合嗎？ 您應該能夠將集合傳遞給您的組件。

傳遞一個集合以及用於指定模型上的哪些字段用於值和標簽的道具怎么樣？

@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" />