Skip to content

Instantly share code, notes, and snippets.

@jonneroelofs
Last active January 14, 2024 17:01
Show Gist options
  • Save jonneroelofs/84a9f60ecf676cf462a16e2adc8c9bc1 to your computer and use it in GitHub Desktop.
Save jonneroelofs/84a9f60ecf676cf462a16e2adc8c9bc1 to your computer and use it in GitHub Desktop.
Files belonging to the "Using wire:key and refreshing child components (troubleshooting Laravel Livewire)" video: https://youtu.be/jDEH9qw2UiQ
<x-background>
<div class="relative shadow-xl bg-white rounded-lg p-6 flex flex-col gap-4">
<h1 class="text-xl font-semibold text-gray-700 flex items-center gap-2">
<span>Refreshing child components </span>
<x-branding.logo class="w-8 h-8">
</x-branding.logo>
</h1>
<div class="flex gap-4 text-xl text-gray-700">
<label for="">
Project name:
</label>
<span>{{$project->name}}</span>
</div>
<div class="flex gap-4 text-xl text-gray-700">
<x-tallui::app.form.switch on-text="active" off-text="inactive" label="Active" wire:model="project.active">
</x-tallui::app.form.switch>
</div>
<div class="flex flex-col gap-2">
<h3 class="font-semibold">Tasks:</h3>
<ul>
@foreach($project->tasks as $index=>$task)
<livewire:project-task :wire:key="$task->id.$project->active" :project="$project" :task="$task"></livewire:project-task>
@endforeach
</ul>
</div>
</div>
</x-background>
<li>
<fieldset
@unless($this->isEditable())
disabled
@endunless
>
<x-tallui::app.form.input label="Taskname" wire:model="task.name">
</x-tallui::app.form.input>
</fieldset>
</li>
<?php
namespace App\Http\Livewire;
use App\Models\Project;
use It4web\TallUi\Traits\InteractsWithGlobalToastr;
use Livewire\Component;
class ProjectDetails extends Component
{
use InteractsWithGlobalToastr;
public Project $project;
public function rules()
{
return [
'project.active' => ['required']
];
}
public function updatedProjectActive()
{
$this->project->save();
$this->succesToastrGlobal('Saved!','Text');
}
public function render()
{
return view('livewire.project-details');
}
}
<?php
namespace App\Http\Livewire;
use App\Models\Project;
use App\Models\Task;
use Livewire\Component;
class ProjectTask extends Component
{
public Project $project;
public Task $task;
public function rules()
{
return [
'task.name' => ['required', 'min:3']
];
}
public function isEditable()
{
return $this->project->active;
}
public function render()
{
return view('livewire.project-task');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment