Livewire - 检测到多个根元素

Question

我正在创建一个 table，其行包含在一个 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>

但是在行组件中，每当我更改输入，或 select 下拉列表中的内容时 select，组件都不会重新呈现。

我想知道为什么会发生这种情况。所以我打开控制台看到：

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

这是组件 blade 文件

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

有什么解决方法吗？

Answer 1

在foreach中使用livewire时，需要添加key。

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

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

中包含 <div>

最后，您使用了很多反复重复的 id 和 name 属性。您不应该有重复的 ID。至于name属性，可以用数组表示法。

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

Livewire - 检测到多个根元素

Livewire - Multiple root elements detected

laravel

laravel-livewire