Livewire-檢測到多個根元素

我正在創建一個表，其行包含在 livewire 組件中

<div class="card">
    <div class="card-body">
        <table class="table table-hover table-striped">
            <thead>
                <tr>
                    <th>Nombre del Riesgo</th>
                    <th>Información</th>
                    <th>Due?o del Riesgo</th>
                    <th>Costo Adicional</th>
                    <th>Prevención</th>
                </tr>
            </thead>
            <tbody>
                <div>
                    @foreach($risks as $risk)
                        <livewire:risk-row :risk="$risk"/>
                    @endforeach
                </div>
            </tbody>
        </table>
    </div>
</div>

但是在行組件中，每當我更改輸入或從下拉選擇中選擇某些內容時，組件都不會重新呈現。

我想知道為什么會發生這種情況。于是我打開控制臺，看到：

Livewire: Multiple root elements detected. This is not supported. See docs for more information https://laravel-livewire.com/docs/2.x/troubleshooting#root-element-issues <div wire:id=?"6CNMP1hiBR3Qy7IbmfbQ">? ?</div>?
value @ index.js:85
Component @ index.js:27
(anonymous) @ index.js:88
value @ index.js:87
(anonymous) @ schedule:432

這是組件刀片檔案

<div>
    <tr>
        <td>{{ $risk['name'] }}</td>
        <td>
            <div><strong>Proceso: </strong>{{ $risk['process']['name'] }}</div>
            <div><strong>Frecuencia: <span class="badge badge-secondary text-sm">{{ $risk['frequency_label'] }}</span></strong></div>
            <div><strong>Impacto: </strong><span class="badge badge-info text-sm">{{ $risk['impact_label'] }}</span></div>
            <div><strong>Riesgo: </strong><span class="badge badge-{{ $risk['risk_color'] }} text-sm">{{ $risk['risk_label'] }}</span></div>
        </td>
        <td>
            <select name="owner" id="owner" class="form-control" wire:change="test">
               @foreach(App\Models\Risk::OWNERS as $owner)
                    <option value="{{ $owner['id'] }}">{{ $owner['name'] }}</option>
               @endforeach
            </select>
            {{ $owner_id }}
        </td>
        <td>
            <select name="owner" id="owner" class="form-control">
                @foreach(App\Models\Risk::COSTS as $cost)
                    <option value="{{ $cost['id'] }}">{{ $cost['name'] }}</option>
                @endforeach
            </select>
        </td>
        <td>
            <select name="owner" id="owner" class="form-control">
                @foreach(App\Models\Risk::PREVENTIONS as $prevention)
                    <option value="{{ $prevention['id'] }}">{{ $prevention['name'] }}</option>
                @endforeach
            </select>
        </td>
    </tr>
</div>

有什么解決方法嗎？

uj5u.com熱心網友回復：

在 foreach 中使用 livewire 時，您需要添加一個密鑰。

<tbody>
    @foreach ($risks as $risk)
        <livewire:risk-row :risk="$risk" :wire:key="$loop->index">
    @endforeach
</tbody>

此外，您可以使用 .<tr>作為根元素并避免<div>在<tbody>.

最后，你使用了很多重復的id屬性name。您不應該有重復的 ID。至于名稱屬性，您可以使用陣串列示法。

<tr>
    <td>{{ $risk['name'] }}</td>
    <td>
        <div><strong>Proceso: </strong>{{ $risk['process']['name'] }}</div>
        <div><strong>Frecuencia: <span class="badge badge-secondary text-sm">{{ $risk['frequency_label'] }}</span></strong></div>
        <div><strong>Impacto: </strong><span class="badge badge-info text-sm">{{ $risk['impact_label'] }}</span></div>
        <div><strong>Riesgo: </strong><span class="badge badge-{{ $risk['risk_color'] }} text-sm">{{ $risk['risk_label'] }}</span></div>
    </td>
    <td>
        <select name="owner[]" class="form-control" wire:change="test">
           @foreach(App\Models\Risk::OWNERS as $owner)
                <option value="{{ $owner['id'] }}">{{ $owner['name'] }}</option>
           @endforeach
        </select>
        {{ $owner_id }}
    </td>
    <td>
        <select name="cost[]" class="form-control">
            @foreach(App\Models\Risk::COSTS as $cost)
                <option value="{{ $cost['id'] }}">{{ $cost['name'] }}</option>
            @endforeach
        </select>
    </td>
    <td>
        <select name="prevention[]" class="form-control">
            @foreach(App\Models\Risk::PREVENTIONS as $prevention)
                <option value="{{ $prevention['id'] }}">{{ $prevention['name'] }}</option>
            @endforeach
        </select>
    </td>
</tr>

標籤：拉拉维尔 laravel-livewire

上一篇：按查詢分組Laravel

下一篇：我如何從AJAX設定路由的url