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.