blob: 83eb78942318f30fd0b118d3d49a84cde2ab353e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
---
order: 7
title: modelable
---
# x-modelable
`x-modelable` allows you to expose any value by name as the target of the `x-model` directive.
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.
Here's a simple example of using `x-modelable` to expose a variable for binding with `x-model`.
```alpine
<div x-data="{ number: 5 }">
<div x-data="{ count: 0 }" x-modelable="count" x-model="number">
<button @click="count++">Increment</button>
</div>
Some Number: <span x-text="number"></span>
</div>
```
<!-- START_VERBATIM -->
<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>
<!-- END_VERBATIM -->
As you can see the outer scope property "number" is now bound to the inner scope property "count".
|