Laravel Livewire：检测到 livewire 多个根元素答案

【问题标题】：Laravel Livewire : livewire multiple root elements detectedLaravel Livewire：检测到 livewire 多个根元素
【发布时间】：2022-06-11 00:42:10
【问题描述】：

我目前正在使用 laravel livewire 开发一个网站

该网站有一个多站点表单页面，并且该多站点表单页面内部有一个动态下拉列表

问题是填完表格后，不会把数据存入数据库

当我检查网站时，出现如下错误：livewire 检测到多个根元素

我该如何解决这个问题？？

Livewire 模型：

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Kredit;
use App\Models\Biaya;
use App\Models\Produk;
use App\Models\Promo;
use App\Models\Motorcycle;
use App\Models\MotorcycleBrand;
use App\Models\Domisili;

class KreditMulti extends Component
{
    public $brand_id;

    public function render()
    {
        $domisilis = Domisili::all();
        // $motorcycles = Motorcycle::all();
        // $motorcycle_brands = MotorcycleBrand::all();

        //for the dynamic dropdown
        if($this->brand_id){
            $motorcycle_brands = MotorcycleBrand::where('motorcycle_id', $this->brand_id)->get();
        } else {
            $motorcycle_brands = [];
        }

        return view('livewire.kredit-multi',
        ['domisilis'=>$domisilis])
                ->withMotorcycles(Motorcycle::all())
                ->with('motorcycle_brands', $motorcycle_brands);
    }
}

livewire 刀片 php：

<div class="form-group row">
            <label for="motorcycle" class="col-md-4">Merek motor</label>
            <div class="col-md-6">
                <select wire:model="brand_id" class="form-control">
                    <option value="" selected>Choose Motor</option>
                    @foreach ($motorcycles as $m)
                        <option value="{{$m->id}}">{{$m->motorcycle_name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <br>
        @if (count($motorcycle_brands) > 0)
            <div class="form-group row">
                <label for="motorcycle_brand" class="col-md-4 col-form-label text-md-right">Jenis Motor</label>
                <div class="col-md-6">
                    <select class="form-control" name="motorcycle_brand_id">
                        <option value="" selected>Choose the motor version</option>
                        @foreach ($motorcycle_brands as $motor)
                            <option value="{{$motor->id}}" wire:key="motorcycle_brand{{$motor->id}}">{{$motor->motorcycle_brand_name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        @endif
        <br>

【问题讨论】：

一个livewire组件在视图上只能有一个根（像<div>(multiple things can be added here)</div>这样的单个元素）。此错误可能与您的组件具有多个元素 ex 的某些视图有关。 <div></div><div></div>（两根）

标签： laravel laravel-livewire

【解决方案1】：

错误尽可能准确。 Livewire 组件只能有一个single root element。相反，您要添加 2 个，包括 2 个中断。

将整个组件包装成一个<div></div>，然后应该修复它。

【讨论】：

【解决方案2】：

所有 livewire 组件必须以 <div> 开头并以 </div> 结尾。

【讨论】：