Jump to another example:
Basics
Store
Composables
Events
Forms
Features
Feature Showcase: Modelable Parent/Child
Two-way sync between parent and child components via model binding.
How it works
The child component declares #[Modelable] on its
$value property.
The parent binds it with ['model' => 'name']
to get two-way parent-child sync.
Parent Blade value
LiVue
Parent Vue value
Last persisted
Not persisted yet
Child component (#[Modelable])
Current child value:
Child updates are pushed to parent state through ['model' => 'name']. Persist to confirm the value server-side.
app/LiVue/ModelableInputDemo.php
#[Modelable]
public string $value = '';
resources/views/livue/modelable-parent-demo.blade.php
@livue('modelable-input-demo', ['value' => $name], ['model' => 'name'])