How to pass arguments through actions?

[bihnkim]

For the slideshow example:

If I wanted to "jump" to the second image and would like to implement a "jump" action, I need to pass in the index of the clicked image. How can this be done?

[savroff]

@bihnkim

<div data-action="jump" data-slide-index="0">Open First slide</div>

jump(event) {
  const element = event.target
  this.targets.findAll('slides')[element.dataset.slideIndex]
  // next your logic to switch slides
}

[adrienpoly]

You could also write it like this

jump(_event, element) {
  this.targets.findAll('slides')[element.dataset.slideIndex]
  // next your logic to switch slides
}```

[javan]

Those are both reasonable options. Action methods are essentially just event handlers and there isn't a way to pass additional arguments to them.

[askehansen]

Im having some issues with the example provided by @adrianholovaty.
If you have an element inside the action element, then _event.target returns the nested element instead in safari.
Also element is just undefined.

This jsbin shows the issues: http://jsbin.com/xiyuho/edit?html,js,console,output

[adrienpoly]

@askehansen element as the second argument of your function was available in Stimulus 0.9 but this has been removed in 1.0. You must use now even.target

about safari if you look at the properties of event.targeton both browser they are the same

http://jsbin.com/nasopusali/1/edit?html,js,console,output

[javan]

event.target returns the nested element

Use event.currentTarget to get the action element. Some related discussion here: https://discourse.stimulusjs.org/t/is-controller-scope-element-safe-to-use/109/9

[zorn-v]

Use event.currentTarget to get the action element.

Stimulus is the crap then, no ?
Why not to introduce some other vars like "maybeThisIsWhatYouNeed" and "actuallyThisVarYouNeed" ?
Fuck standart vars.

[zorn-v]

I'm just playing with something like data-action="click->invoices#print" data-invoice="{{ invoice.extIdString }}" and I was surprised that sometimes it print what I want (console.log), but sometimes (several F5) "undefined" with

  print(e) {
    console.log(e.target.dataset.invoice)
  }

After change "target" to "currentTarget" all fine. Is not is the crap ?

PS. Thanks to this topic

[javan]

Stimulus is the crap then, no ?

No.

Event.currentTarget

The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.

[zorn-v]

Argument. Thanks, was not right.

[zorn-v]

I have idea, all not understanding is about not passing DOM element to handler (I think it is common case).
Why not to pass it as second arg ?

[zorn-v]

What I want - defined behavior of my code.