Is it possible to pass a variable through an action?

1

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?

2

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:

toggle(){
  const variable = this.data.get("variable")
  ...
}
1 Like
3

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) { 
  event.preventDefault()
  const value = event.target.dataset.value 
}
3 Likes
4

Thanks @adrienpoly and @savroff! That helped immensely!