Not getting correct data param on click different elements

[rasalghul]

Hello guys I need some help, I am trying to pass as data param an ID for each element when I click on them, but I am getting the same ID for all elements, not sure why…

HTML

<div data-controller="split">
  <div class="grid-3" data-split-target="type" data-type="3">
    <div class="scroll-3">
      <div class="mx-2" data-controller="requests">
        <h3><i class="bi bi-building"></i>&nbsp;Compañias</h3>
        <% @companies.each do |company| %>
          <div class="d-flex p-3 flex-column bg-white mb-1 shadow-sm rounded" type="button" data-requests-target="company" data-action="click->requests#getContacts" data-requests-company-param="<%= company.id %>">
            <h6 class="text-dark"><%= company.name.titleize %></h6>
            <p class="mb-0"><%= company&.address %></p>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>

Controller

import { Controller } from "stimulus";

export default class extends Controller {
  static targets = [ "company" ]

  getContacts(e) {
    e.preventDefault();
    console.log("ID")

    var companyId = this.companyTarget.dataset.requestsCompanyParam;
    console.log(companyId);
  }
}

As you cans see in the HTML rendered data-requests-company-param is different for each element, when I click on any always getting “1”, for company 2 supposed to get “2”

html rendered:

console:
ID
1
ID
1

What I am doing wrong?

[tleish]

this.companyTarget will always return the first of targets in this instance.

Try using Action Parameters

import { Controller } from "stimulus";

export default class extends Controller {
  getContacts({ params: { company } }) {
    console.log("ID", company)
  }
}