Laravel Livewire: Passing option value onChange of Select input

Question

I am trying to pass a value from the <option> of my <select> input to my livewire controller component and echo the value.

Livewire Blade View Component:

{!! Form::select('goals',$goals_plucked,null,[
    'placeholder' => trans('classes.backend.forms.select_goals'),
    'class' => 'custom-select',
    'id' => 'goals',
    'wire:change' => "goals(this.val)",
]) !!}

This get's me an output of null in my Livewire Controller Component

Livewire Controller Component

public $goals;

public function goals($goals)
{
    dd($goals);
}

After watching some tutorials. I also tried using 'wire:change' => "goals($event.target.value)", which gave me an error of Undefined variable $event, obviously because it was not defined in main controller. I am not sure what am I doing wrong here.

What I am trying to do: Trying to create a flow just like select country then select state and then select city. via livewire. Before selecting a country the inputs of the select state and city won't be visible

Hardik Sisodia · Accepted Answer · 2021-05-31 13:24:54Z

4

I tried below code and it worked for me well. Just had to make sure I use normal html form inputs and dynamically add options to it by foreach loop. Also used mount() function for getting getting values and id's for select dropdowns.

Livewire Blade View Component:

<select wire:model="goal" name="goal" class="form-control" required>
    <option value="">
        {!! trans('classes.backend.forms.select_goals') !!}
    </option>
    @foreach ($goals as $goal)
        <option value="{{ $goal->id }}">{{ $goal->goals }}</option>
    @endforeach
</select>

Livewire controller component

public $goals;
public $goal;

public function mount()
{
    $this->goals = Goals::all()->isActive();
}

public function updatedGoal($value)
{
    dd($value);
}

answered May 31, 2021 at 13:24

Hardik Sisodia

6353 gold badges16 silver badges41 bronze badges

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

Comments

Anand Bhagat · Accepted Answer · 2021-05-31 08:54:43Z

2

just give wire:model="variable_name" to select in front end.

and in livewire controller there should be a public variable with same name. it will automatically get the value on select value change.

below is the example of same

 <select class="custom-select border-0 shadow-none" id="enquiry_for" wire:model="enquiry_for">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
 </select>

answered May 31, 2021 at 8:54

Anand Bhagat

414 bronze badges

5 Comments

Hardik Sisodia Over a year ago

I tried 'wire:model' => "goals", & 'wire:model' => $goals, but nothing happened also tried putting 'wire:model' => "$goals", which gave me an error Property [$] not found on component

Anand Bhagat Over a year ago

is the select in livewire view?

Prospero Over a year ago

'wire:model' => "goals". If you are receiving an error with $ means that binding is working. So, you need to write in the right syntax attr

Anand Bhagat Over a year ago

@HardikSisodia are you writing wire:model in single quote. if yes remove it.

Mark Parrish Over a year ago

It is wire:model="goal". You have wire:model => 'goal'. It is model = property not model => property. I screwed this many times.

Collectives™ on Stack Overflow

Laravel Livewire: Passing option value onChange of Select input

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related