Created
July 31, 2023 06:21
Livewire Parent Child Modelable Property
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*Parent Component */ | |
<?php | |
namespace App\Livewire; | |
use Livewire\Component; | |
class ParentComponent extends Component | |
{ | |
public $foo; | |
public function render() | |
{ | |
return view('livewire.parent-component'); | |
} | |
} | |
/** parent-component.blade.html **/ | |
<div class="container mx-auto max-w-lg"> | |
<livewire:child-component wire:model="foo"/> | |
{{$foo}} | |
</div> | |
Child Component | |
<?php | |
namespace App\Livewire; | |
use Livewire\Component; | |
use Livewire\Attributes\Modelable; | |
class ChildComponent extends Component | |
{ | |
#[Modelable] | |
public $bar; | |
public function render() | |
{ | |
return view('livewire.child-component'); | |
} | |
} | |
/** child-component.blade.php **/ | |
<div> | |
<div class="my-2"> | |
<label class="text-sm block text-gray-800">Full Name</label> | |
<div class="mt-1"> | |
<input wire:model.live="bar" type="text" name="example-text-input" placeholder="Enter your fullname" class="border border-gray-300 focus:outline-blue-400 rounded w-full h-8 p-3 text-sm"> | |
</div> | |
</div> | |
</div> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment