Ready to get started?

Join Adocasts+ for $8/mo or sign into your account to get access to all of our lessons.

EdgeJS Components #3.1

Adding Interactivity to our Button

In this lesson, we'll add extendable interactivity to our button using AlpineJS. We'll also walk through a demonstration of how we can utilize event propagation in AlpineJS to our advantage.

Before we start extending off our base button with our different styles, let’s first add interactivity so it’s not just a basic HTML button.

Event Propagation

First, let’s add x-data to the parent div of our button within our demonstration page. This will bind AlpineJS to the element, enabling Alpine state, events, etc. Meaning, we can also add a click handler to it.

@layout.app({ title: request.params().name })

  <h3 class="font-bold">Base Button</h3>
  <div 
    x-data 
    @click="console.log('clicked')" 
    class="mb-8 space-x-3 space-y-3">
  <div class="mb-8 space-x-3 space-y-3">
    @button()
      Base Button
    @end
  </div>

@end
Copied!
  • resources
  • views
  • pages
  • components
  • buttons.edge

Currently, this won’t do anything in terms of our actual button. However, if we add x-data to our button as well, we’ll see that AlpineJS propagates the click even from our button, up to our parent div’s click handler.

Ready to get started?

Join Adocasts+ for $8/mo or sign into your account to get access to all of our lessons.

Join The Discussion! (0 Comments)

Please sign in or sign up for free to join in on the dicussion.