In this lesson, we define a "count" state value with the x-data
directive provided by Alpine JS. This defines a new scoped component, which can have access to this state.
We then display the "count" value in our HTML with the x-text
directive, which updates an element's innerText
value.
We also hook up buttons with click event listeners with x-on:click
, which allows us to modify the count value as desired.
<!-- Define the state for its children --> <div x-data="{count: 0}"> <button @click="count--">-1</button> <button @click="count++">+1</button> <!-- Show the state prop by using x-text --> <p>The current count is <strong x-text="count"></strong>.</p> <button @click="count = 0">reset</button> </div>
You are not able to access the state outside the outmost div block