and define an object which will have a count state value set to . We have just defined a component and that count state value will be available within the scope of this component.
0:25 To output the value of this count, we can use another Alpine JS directive, x-text, which will update the inner text value of an element. The here is now our actual state value. Let's verify this by changing the value to 2 in our data object. You can see the value updated in the DOM element.
0:44 For both buttons, I will add another directive, x-on, used to define event listeners. Here we're listening to the click event, so we'll use x-on:click. There is a shorthand syntax available for event listeners, you can use the @ symbol instead of x-on.
1:02 For the first button, I want to set the count value to count-1, count--. For the other one, we'll set it to count++. Let's try it out. Yep, it works.
1:16 Let's say below a paragraph, we want to have a reset button that sets the counts to . If I create another button down here and set the @click to be count = , well, it doesn't work. This is because the count value is only available within the scope of the components where it's defined. If we move the button up inside the wrapper, increment the count a bit and click resets. It now works.
1:41 As a recap, we define the state object with the x-data directive which makes the state available within the component scope. We then use the x-text to display the count value and listen to click events with x-on or @click where we can update the state according to our needs.