Stimulus Cheatsheet
References
- Homepage: https://stimulusjs.org/
- Github: https://github.com/stimulusjs/stimulus
Sample controller
import { Controller } from 'stimulus'
export default class extends Controller {
static targets = [ 'foo', 'bar' ]
initialize () {}
connect () {}
disconnect () {}
}
Lifecycle callbacks
initialize
: once, when the controller is first instantiatedconnect
: anytime the controller is connected to the DOMdisconnect
: anytime the controller is disconnected from the DOM
Actions
An action could be invoked by using data-action="event->controller#method"
An element could have multiple actions from same or different controllers, separated by space.
e.g. data-action="product#addToCart card#updateItems"
List of tags with default action:
a -> click
button -> click
input[type=submit] -> click
form -> submit
input -> change
select -> change
textarea -> change