Rails中Stimulus.js标签导航点击索引返回-1的修复咨询

问题根源 #

控制台输出索引为-1，是因为event.target不一定指向绑定了data-tab-target的<a>标签元素。比如点击标签文本时，部分浏览器中event.target可能指向文本节点（而非<a>元素），导致this.tabTargets.indexOf(event.target)找不到对应元素，返回-1。

正确的做法是使用event.currentTarget，它始终指向绑定了data-action事件处理程序的元素，也就是我们定义的tab目标元素。

修改后的控制器代码 #

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["tab", "content"];

  connect() {
    this.showTab(0);
  }

  changeTab(event) {
    event.preventDefault();
    const tabElement = event.currentTarget;
    const index = this.tabTargets.indexOf(tabElement);
    if (index !== -1) {
      this.showTab(index);
      console.log("Clicked tab index:", index);
    }
  }

  showTab(index) {
    this.tabTargets.forEach((tab, i) => {
      tab.classList.toggle("tab-active", i === index);
      this.contentTargets[i].toggleAttribute("hidden", i !== index);
    });
  }
}

关键修改点 #

1. 用event.currentTarget替代event.target，确保获取到绑定事件的<a>标签元素
2. 添加索引有效性判断，避免无效索引导致逻辑错误
3. 用toggleAttribute简化内容显示/隐藏逻辑，替代手动设置/移除hidden属性

说明 #

你的HTML视图代码无需修改，保持原样即可。修改后点击标签时，控制台会输出正确的索引值，标签内容也会随选择正常切换。

内容的提问来源于stack exchange，提问作者Wilson CELY