Laravel Livewire : livewire multiple root elements detected

https://laravel-livewire.com/docs/2.x/nesting-components#keyed-components

Level 39

@nicho

You have to add a key in your loop elt

The easiest is $loop->index

https://laravel.com/docs/9.x/blade#the-loop-variable

Level 1

@sr57 On this foreach??

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

Or both of the foreach??

Level 39

All

Level 1

@sr57 Is it like this??

<select wire:model="brand_id" class="form-control" wire:key="$loop->index">
                    <option value="" selected>Choose Motor</option>
                    @foreach ($motorcycles as $m)
                        <option value="{{$m->id}}">{{$m->motorcycle_name}}</option>
                    @endforeach
                </select>

sr57

Level 39

Seem you didn't understand what I wrote

You have to add a key in your loop elt

and what about using a loop-index outside the loop?

Put wire:key="$loop->index" inside your loop ...

Level 122

You have multiple root elements in your view - a div and a script.

There can be only one root element. Put the script inside the div.

But why are you trying to use jquery inside the livewire component?

Level 1

@Snapey It's for the error message, when the user put an invalid input on a certain form, it redirect it back to that field

Example : ID (max length 3): 1234 Name : ABC

It's invalid on the ID because max length only 3

So it will redirect to that invalid input

Level 1

@Snapey Thank you for the advice, but i'm sorry, it still doesn fix the main issue that i'm having currently, the multiple root elements is gone.

But the main problem is when i click the submit button, it won't store the value that already filled

Level 122

@Nicho so not what you wrote in the question (twice) ?

Level 1

@Snapey Yeah, because when i do inspection there's a warning that said multiple root elements and i think that the source of the error, but it turns out wasn't. Forgive me sir, it's my bad

Level 122

you are adding the wire key wrong

<select wire:model="brand_id" class="form-control" wire:key="{{ $loop->index}}">
                    <option value="" selected>Choose Motor</option>
                    @foreach ($motorcycles as $m)
                        <option value="{{$m->id}}">{{$m->motorcycle_name}}</option>
                    @endforeach
                </select>

but that's not your problem and it won't fix anything

what is your problem?

Level 1

@Snapey My problem is when data is filled, and when i try to click the submit button, it won't store the data/value that's already been filled into the database, it just stuck on that page

Level 122

@Nicho on step 1 or step 2?

does it call the competent method when you save?

you are going to have to narrow it down with some debugging