Update a count state value with the x-on event listener directive in Alpine JS

Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

Instructor: [0:00] We have two buttons here and a bit of text that says the current count is . The buttons say -1 and +1 and we want to update the count value when they are clicked.

[0:11] Let's add an x-data attributes to our wrapping <div> 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.

egghead
egghead
~ an hour ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today