Question about the passed Stimulus controller values

[titanve]

This is a quick question: Why should we only pass values in the element where we placed the data-controller?
Why we cannot place them in the child elements under the element where the data-controller is placed?

Thanks!

[marcoroth]

Hey @titanve, the primary reason that speaks against this is that you could end up with more than value for the same controller and Stimulus Value, since you are allowed to place the same attribute on more than just the controller-element itself.

[marcoroth]

With that being said, I think it would be neat to have a similar feature to the Stimulus Targets where you can define the same Stimulus Value more than once and get access to all the values in an array with the plural accessor.

So you could do something like:

<div data-controller="post">
  <article id="post_1" data-post-target="post" data-post-id-value="1"></article>
  <article id="post_2" data-post-target="post" data-post-id-value="2"></article>
  <article id="post_3" data-post-target="post" data-post-id-value="3"></article>
  <article id="post_4" data-post-target="post" data-post-id-value="4"></article>
</div>

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["post"]
  static values = {
    id: Number
  }

  connect() {
    this.idValue // => either `null` (since the data-attribute on the controller-element is not defined) or the first one it sees (`1`)
    this.idValues // => [1, 2, 3, 4]
  }
}

[titanve]

Hi @marcoroth

Is it possible to implement your suggestion? I would like to.

We would need to search down in the DOM tree, from where the data-controller="post" is placed, for any occurrence of data-post-*-value="some_value" and populate the array or arrays depending if we have more than one key value.

Thanks.

[david942j]

+1 to have the support of values

[sebastialonso]

@marcoroth

you could end up with more than value for the same controller and Stimulus Value

I think that's the use case OP might be referring to. At least I'm in a similar scenario and haven't been able to find a solution.

<div data-controller="filter">
   <h1>Choose filter</h1>
   <button data-filter-slug-value="GREEN" data-action="click -> map#filter">GREEN</button>
   <button data-filter-slug-value="RED" data-action="click -> map#filter">RED</button>
   <button data-filter-slug-value="BLUE" data-action="click -> map#filter">BLUE</button>
</div>

Maybe I'm approaching this the wrong way, but I'd like the filter method to get the "correct" value of slug whenever I click a button, which are generated programatically.
If I'm understanding this correctly, I'm always getting this.slugValue as empty becase data-*-value is not defined in the controller element?

[adrienpoly]

@sebastialonso what you want to use here is the Action Parameters

• Values are global to the controller
• Action params are scoped to the action element

[sebastialonso]

I ended up going exactly with that, thanks @adrienpoly!