menu

Questions & Answers

Laravel Livewire radio input not returning its value on the component view

hello I'm new to livewire, I created a component for the radio buttons and I'm trying to show the selected radio value on the component view but its always giving null no matter what is the checked radio its always null

The Component View

@foreach ($brands as $brand)
<div class="template-checkbo">
    <input wire:model="brandsVal" name="brandsVal" type="radio" value="{{ $brand->id }}">
    <label class="main-label">
        {{ $brand->name }}
    </label>
</div>
@endforeach

@dump($brandsVal)

The Component Class

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class BrandSidebar extends Component
{
   public $brands;
   public $brandsVal;

   public function render()
   {  
       return view('livewire.brand-sidebar');
   }
}
Comments:
2023-01-23 23:30:11
Did you check that $brands object is not empty?
2023-01-23 23:30:11
@haruk1515 Yes it's not <br/> the problem is with $brandsVal
Answers(1) :

I found the solution after opening the console and seeing a Warning not an error

Livewire: Multiple root elements detected. This is not supported.

Apparently The view component must have one root element other wise the whole functionality wont work according to this doc:
https://laravel-livewire.com/docs/2.x/troubleshooting#root-element-issues