Courses

Livewire 3 for Beginners with Laravel 12 Starter Kit

Edit Form: Pass Parameters to Component

Summary of this lesson:
- Creating edit functionality for existing company records
- Passing model data from controllers to Livewire components
- Populating form fields with existing values from database
- Implementing update functionality with similar validation rules

It's time to create the form to edit the company and pass the parameter from the URL to the Livewire component.

Company ID: From URL to Livewire

Imagine we have a URL /companies/1/edit, and our resourceful Controller looks like this.

app/Http/Controllers/CompanyController.php:

namespace App\Http\Controllers;
 
use App\Models\Company;
 
class CompanyController extends Controller
{
    public function create()
    {
        return view('companies.create');
    }
 
    public function edit(Company $company) 
    { 
        return view('companies.edit', compact('company', 'countries')); 
    } 
}

We get the $company with Laravel's Route Model Binding.

Now, the question is: in the Blade file, how do we pass the parameter to the Livewire component?

I've created a new edit.blade.php, almost copy-pasting everything from the create.blade.php. I know it's a code duplication, but we will optimize this when discussing full-page components and layouts in the upcoming lessons.

Here's the syntax.

resources/views/companies/edit.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Form</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100">
    <livewire:company-edit :company="$company" />
</body>
</html>

See that line?

<livewire:company-edit :company="$company" />

So yeah, we will create a new Livewire component:

php artisan make:livewire CompanyEdit

We can pass parameters with the syntax :key="$variable", similar to Blade components.

Then, those parameters will auto-land in the Component's mount() method.

app/Livewire/CompanyEdit.php:

// ...
 
use App\Models\Company;
 
class CompanyEdit extends Component
{
    public Company $company;
 
    public function mount(Company $company)
    {
        $this->name = $company->name;
 
        // ...
    }
 
}

From $company to Component Properties

In our case, we're passing the full object of the Company class. There are various ways to deal with this, but I will just manually assign the object properties to the component properties.

Here's the complete code for the component.

app/Livewire/CompanyEdit.php:

namespace App\Livewire;
 
use App\Models\City;
use App\Models\Company;
use App\Models\Country;
use Illuminate\Support\Collection;
use Livewire\Attributes\Validate;
use Livewire\Component;
 
class CompanyEdit extends Component
{
    public Collection $countries;
    public Collection $cities;
    public Company $company;
 
    #[Validate('required|min:3', onUpdate: false)]
    public string $name = '';
 
    #[Validate('required', onUpdate: false)]
    public string $country = '';
 
    #[Validate('required', onUpdate: false)]
    public string $city = '';
 
    public string $savedName = '';
 
    public function mount(Company $company)
    {
        $this->name = $company->name;
        $this->country = $company->country_id;
        $this->cities = City::where('country_id', $this->country)->get();
        $this->city = $company->city_id;
 
        $this->countries = Country::all();
    }
 
    public function updated($property)
    {
        if ($property == 'country') {
            $this->cities = City::where('country_id', $this->country)->get();
            $this->city = $this->cities->first()->id;
        }
    }
 
    public function render()
    {
        return view('livewire.company-edit');
    }
 
    public function save(): void
    {
        $this->validate();
 
        $this->company->update([
            'name' => $this->name,
            'country_id' => $this->country,
            'city_id' => $this->city,
        ]);
 
        $this->savedName = $this->name;
    }
}

It's very similar to the CompanyCreate component, with a few differences:

  • In the mount() method, we assign the values to the properties, including taking the $cities by the current company.country_id value
  • The updated() and render() method don't change
  • The save() method performs the Eloquent update() operation instead of Company::create() and also doesn't reset the form values

And the Livewire Blade file of resources/views/livewire/company-edit.blade.php is identical to the company-create.blade.php. We could even use the same Blade file, but I will leave it like this for the demonstration.

Here's the visual result:

Here's the GitHub commit for this quick lesson, with a quick fix commit afterward.

So, we've finished the first section of this course, about how single Livewire component works. Time to move to more complex page structures.

In the next lesson, I will show how Livewire full-page components may replace Laravel Controllers.

Previous: Form Validation: Multiple Options

No comments yet…

avatar
You can use Markdown