Hey there, friends. It’s been a while since our last post. And not without reason. In the past few months I’ve spent most of my professional time developing things in Laravel, and most things I learned (AKA things I did wrong) were always well documented. So I didn’t really see the point in writing blog posts, since they were already out there.
Well, that changes today! Welcome to our very first blog post about the popular development framework Laravel and it’s package Livewire, to be specific.
The problem
Livewire is a popular package for Laravel that allows you to add interactivity to Laravel by writing PHP. And Livewire is pretty great. It allowed me to cut down on development time and do certain things just a little better than I used to.
Today, I was building a form using Livewire with a dropdown select to choose a value. In 99% of the use cases it worked just fine. I select a value, Livewire submits the value. Livewire then does some things in the backend to move over a file, and voila… You’re taken to the noew location for the file.
Every time I selected the first value, Livewire insisted the value was “null”. Inspecting the code showed me that the value was set just fine, so what was happening?
Cause and Solution
Apparently, Livewire has a weird quirk where you need to manually set the first value as the default value for your model variable when creating a select form. Once you do this, Livewire will interpret the value correctly and do what you’re asking it to do.
You can assign the value in the mount() method of your Livewire component. In my example, I am grabbing the id from the first option that I’m also using to populate the options.
Alternatively, you can create an option in your dropdown that doesn’t have a value, like this:
<select class="form-select" wire:model="targetControl">
<option value="">Select an option...</option>
<option value="{{$control->id}}>{{$control->name}}</option>Either solution will fix the problem of Livewire submitting “null” for your first option. And with that problem solved, you can move on to more happy coding!