Now, let's build the page to edit the task. It will be structurally similar to the Create form but with a few differences.
Table: Link to Edit Route
We need to add the "Edit" button to the table. But before that, we need a Livewire component and a Route.
php artisan make:livewire Tasks/Editroutes/web.php:
use App\Livewire\Tasks;use App\Livewire\Settings\Appearance;use App\Livewire\Settings\Password;use App\Livewire\Settings\Profile;use Illuminate\Support\Facades\Route; Route::get('/', function () { return view('welcome');})->name('home'); Route::view('dashboard', 'dashboard') ->middleware(['auth', 'verified']) ->name('dashboard'); Route::middleware(['auth'])->group(function () { Route::redirect('settings', 'settings/profile'); Route::get('settings/profile', Profile::class)->name('settings.profile'); Route::get('settings/password', Password::class)->name('settings.password'); Route::get('settings/appearance', Appearance::class)->name('settings.appearance'); Route::get('tasks', Tasks\Index::class)->name('tasks.index'); Route::get('tasks/create', Tasks\Create::class)->name('tasks.create'); Route::get('tasks/{task}/edit', Tasks\Edit::class)->name('tasks.edit'); }); require __DIR__.'/auth.php';Now, we can add link to the "Edit" button.
resources/views/livewire/tasks/index.blade.php
BEFORE:
<flux:button href="#" variant="filled">{{ __('Edit') }}</flux:button>AFTER:
<flux:button href="{{ route('tasks.edit', $task) }}" variant="filled">{{ __('Edit') }}</flux:button>Edit Form
Now, we can inputs and the form.
resources/views/livewire/tasks/edit.blade.php:
<section class="max-w-5xl"> <form wire:submit="save" class="flex flex-col gap-6"> <flux:input wire:model="name" :label="__('Task Name')" required badge="required" /> <flux:checkbox wire:model="is_completed" label="Completed?" /> <div> <flux:button variant="primary" type="submit">{{ __('Save') }}</flux:button> </div> </form></section>Of course, when you visit the edit page...