Stimulus Discourse

Is it possible to pass a variable through an action?


Lets say I have a controller controlling my header called Toggleable. Within my header I have two different dropdown buttons, and two different dropdown menu areas. Using the same controller, and same controller function, is it possible for me to pass along two different data-targets into the function?

Something like data-action="toggler#toggle(firstTarget)"

Is this possible? If not, what is the best way to handle this?


You can pass specific values to your controller using the data API:

<button data-controller="toggler" data-toggler-variable="value1">Dropdown 1</button>
<button data-controller="toggler" data-toggler-variable="value2">Dropdown 2</button>

your controller:

  const variable ="variable")


Also if variable specific to the element within an action.
You can put your variable as a part of a data element and use it in action.

For example:

<a href="#" data-action="toggler#toggle" data-value="targetId">Click Me</a>

Then in js you can do this:

toggle(event) { 
  const value = 


Thanks @adrienpoly and @savroff! That helped immensely!