Laravel Livewire : livewire multiple root elements detected

Question

I'm currently developing a website using laravel livewire

The website has a multi-site form page, and there's a dynamic dropdown on the inside of that multi-site form page

The problem is when the form is filled, it won't store the data into the database

When i do inspect the website there's an error that read :livewire multiple root elements detected

How do i fix this??

Livewire model :

<?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);
    }
}

The livewire blade 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>

A livewire component can only have a single root on the view (a single element like <div>(multiple things can be added here)</div>). This error's probably related to some view of your components having more than one element ex. <div></div><div></div> (two roots) — itepifanio
– itepifanio, Commented May 18, 2022 at 12:06

Manuel Glez · Accepted Answer · 2022-06-11 23:15:19Z

4

Your blade code has several roots

1.- <div class="form-group row"....>
2.-  <br>
3.-  @if (count($motorcycle_brands) > 0)...@endif
4.- <br>

Enclose all that stuff in a single root

<div>
   <div class="form-group row"....>
   <br>
   @if (count($motorcycle_brands) > 0)...@endif
   <br>
</div>

answered Jun 11, 2022 at 23:15

Manuel Glez

9605 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AMIN · Accepted Answer · 2023-09-21 15:54:49Z

4

all livewire components must be start with a <div> and end with a </div>. actually you must wrap the whole <div> and </div> s into a single <div></div>

https://laravel-livewire.com/docs/2.x/troubleshooting#root-element-issues

edited Sep 21, 2023 at 15:54

AMIN

2481 silver badge10 bronze badges

answered Jun 10, 2022 at 16:41

kaiforena

613 bronze badges

Comments

Yinci · Accepted Answer · 2022-05-19 06:46:18Z

0

The error is as exact as it can be. A Livewire component simply can only have a single root element. Instead, you're adding 2, including 2 breaks.

Wrap the whole component into a single <div></div>, and then it should be fixed.

answered May 19, 2022 at 6:46

Yinci

2,5901 gold badge5 silver badges17 bronze badges

Comments

Aykhan Gasimzade · Accepted Answer · 2022-07-06 14:16:22Z

0

public $motorcycle_brands,$domisilis,$brand_id,$motorcycles;

public function render()
{
    $this->domisilis = Domisili::all();
    $this->motorcycles = Motorcycle::all();

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

    return view('livewire.kredit-multi');
}

Blade

@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" wire:model="brand_id">
                    <option value="" selected>Choose the motor version</option>
                    @foreach ($motorcycle_brands as $motor)
                        <option value="{{$motor->id}}">{{$motor->motorcycle_brand_name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
    @endif

answered Jul 6, 2022 at 14:16

Aykhan Gasimzade

292 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Laravel Livewire : livewire multiple root elements detected

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related