Skip to content

$data

$data is a magic property that gives you access to the current Alpine data scope (generally provided by x-data).

html
<div x-data="{ greeting: 'Hello' }">
    <div x-data="{ name: 'Pirate Dev' }">
        <button @click="sayHello($data)">Say Hello</button>
    </div>
</div>
 
<script>
    function sayHello({ greeting, name }) {
        alert(greeting + ' ' + name + '!')
    }
</script>

Now when the button is pressed, the browser will alert Hello Pirate Dev!, because the entire data object is passed to the function