Livewire - 检测到多个根元素

Question

我正在创建一个表，其行包含在 Livewire 组件内

\n

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

\n

但在行组件中，每当我更改输入或从下拉选择中选择某些内容时，该组件都不会重新渲染。

\n

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

\n

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=\xe2\x80\x8b"6CNMP1hiBR3Qy7IbmfbQ">\xe2\x80\x8b \xe2\x80\x8b</div>\xe2\x80\x8b\nvalue @ index.js:85\nComponent @ index.js:27\n(anonymous) @ index.js:88\nvalue @ index.js:87\n(anonymous) @ schedule:432\n

\n

这是组件刀片文件

\n

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=\xe2\x80\x8b"6CNMP1hiBR3Qy7IbmfbQ">\xe2\x80\x8b \xe2\x80\x8b</div>\xe2\x80\x8b\nvalue @ index.js:85\nComponent @ index.js:27\n(anonymous) @ index.js:88\nvalue @ index.js:87\n(anonymous) @ schedule:432\n

\n

有什么解决方法吗？

\n

Answer 1

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