如何将ERB文件中的元素索引传递给Stimulus控制器

问题根源 #

你当前的Stimulus控制器应该绑定在父容器（比如.post-cards）上，这会导致所有data-meatballs-target="menu"元素被收集到同一个控制器实例中。调用this.menuTarget时，Stimulus只会返回第一个匹配的目标元素，所以无论点击哪个卡片的菜单按钮，都只会操作第一个卡片的菜单。

解决方案 #

把Stimulus控制器绑定到每个博客卡片上，让每个卡片拥有独立的控制器实例，这样每个控制器只会管理自己卡片内的菜单目标。

修改后的ERB代码

<div class="post-cards">
  <% @posts.reverse.each_with_index do |post, index| %>
    <!-- 把data-controller绑定到当前post-card，每个卡片对应一个独立控制器实例 -->
    <div class="post-card" data-controller="meatballs">
      <%= cl_image_tag post.photo.key, class: "post-photo" %>
      <div class="icons">
        <a href="#" data-action="click->meatballs#toggleMenu">
          <i class="fa-solid fa-ellipsis-v"></i>
        </a>
        <!-- 该menu目标仅属于当前卡片的控制器实例 -->
        <div class="meatballs-menu" data-meatballs-target="menu" hidden>
          <%= link_to post_path(post), data: { turbo_method: :delete, turbo_confirm: 'Voulez-vous vraiment supprimer cet article ?' } do %>
            <i class="fa-solid fa-trash"></i> Supprimer
          <% end %>
          <%= link_to edit_post_path(post), data: { turbo_method: :edit } do %>
            <i class="fa-solid fa-edit"></i> Modifier
          <% end %>
        </div>
      </div>
      <div class="post-card-content">
        <h2><%= post.title %></h2> <!-- 移除原代码中多余的</li>标签 -->
        <p><%= post.description %></p>
        <p>Posté le <%= post.created_at.strftime("%d/%m/%Y") %></p>
      </div>
    </div>
  <% end %>
</div>

Stimulus控制器代码（无需修改）

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="meatballs"
export default class extends Controller {
  static targets = [ "menu" ]

  toggleMenu(event) {
    event.preventDefault()
    this.menuTarget.toggleAttribute("hidden")
  }
}

额外提示 #

原ERB代码里的<h2><%= post.title %></li></h2>存在多余的</li>标签，建议移除以避免HTML结构错误。

内容的提问来源于stack exchange，提问作者Henny Pop