Creating an Action
Explore how to create Stimulus actions by connecting DOM events to controller methods using data-action attributes. Understand event descriptors, default events, and handling multiple actions to build interactive HTML elements efficiently.
We'll cover the following...
Connecting a DOM Event to the Controller
In Stimulus, an action is what connects a DOM event to the controller code that we want to execute when that event occurs. Like controllers, Stimulus actions are defined using a data attribute in the markup; we add the attribute to the DOM element whose events we want to watch. In our case, we want to add a button that says “Hide”:
The new line defining the actions is data-action="click->favorite-toggle#toggle". The data-action is the attribute name that signals to Stimulus that an action is being defined. The value of the ...