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?
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>
const variable = this.data.get("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.
<a href="#" data-action="toggler#toggle" data-value="targetId">Click Me</a>
Then in js you can do this:
const value = event.target.dataset.value
Thanks @adrienpoly and @savroff! That helped immensely!