modelable
July 4, 2022Меньше 1 минуты
x-modelable
x-modelable
allows you to expose any Alpine property as the target of the x-model
directive.
Here's a simple example of using x-modelable
to expose a variable for binding with x-model
.
<div x-data="{ number: 5 }">
<div x-data="{ count: 0 }" x-modelable="count" x-model="number">
<button @click="count++">Increment</button>
</div>
Number: <span x-text="number"></span>
</div>
<div class="demo">
<div x-data="{ number: 5 }">
<div x-data="{ count: 0 }" x-modelable="count" x-model="number">
<button @click="count++">Increment</button>
</div>
Number: <span x-text="number"></span>
</div>
</div>
As you can see the outer scope property "number" is now bound to the inner scope property "count".
Typically this feature would be used in conjunction with a backend templating framework like Laravel Blade. It's useful for abstracting away Alpine components into backend templates and exposing state to the outside through x-model
as if it were a native input.