Stimulus.js 标签导航：点击标签索引返回 -1

Question

我在我的 Rails 应用程序中使用 Stimulus.js 创建了一个选项卡导航。但是，当我点击一个标签时，没有显示内容，console.log显示点击的标签索引返回-1。我该如何解决这个问题？

这是我的 Stimulus 控制器 (tabs_controller.js)：

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

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

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

  changeTab(event) {
    event.preventDefault();
    this.showTab(this.tabTargets.indexOf(event.target));
    console.log("Clicked tab index:", this.tabTargets.indexOf(event.target));
  }

  showTab(index) {
    this.tabTargets.forEach((tab, i) => {
      tab.classList.toggle("tab-active", i === index);
      if (i === index) {
        this.contentTargets[i].removeAttribute("hidden");
      } else {
        this.contentTargets[i].setAttribute("hidden", true);
      }
    });
  }
}

这是相应的 HTML 视图：

<div data-controller="tabs">
  <ul class="tabs">
    <li>
      <a href="#" data-tab-target="tab" data-action="click->tabs#changeTab" class="tab-active">Tab 1</a>
    </li>
    <li>
      <a href="#" data-tab-target="tab" data-action="click->tabs#changeTab">Tab 2</a>
    </li>
    <li>
      <a href="#" data-tab-target="tab" data-action="click->tabs#changeTab">Tab 3</a>
    </li>
  </ul>

  <div data-content-target="content" class="tab-content">
    <p>Tab 1 content...</p>
  </div>
  <div data-content-target="content" class="tab-content" hidden>
    <p>Tab 2 content...</p>
  </div>
  <div data-content-target="content" class="tab-content" hidden>
    <p>Tab 3 content...</p>
  </div>
</div>

当我点击任何选项卡时，浏览器控制台显示以下输出：

Clicked tab index: -1

我想要一个选项卡菜单，根据选择显示内容。

Answer 1

问题是数据目标是错误的 他们的命名需要是 数据控制器名称目标=“” 所以在我的例子中，因为控制器被称为选项卡 数据标签目标=“”

解决了问题

      <div data-controller="tabs">
    <ul class="tabs">
      <li>
        <a href="#" data-tabs-target="tab" data-action="click->tabs#changeTab" class="tab-active">Tab 1</a>
      </li>
      <li>
        <a href="#" data-tabs-target="tab" data-action="click->tabs#changeTab">Tab 2</a>
      </li>
      <li>
        <a href="#" data-tabs-target="tab" data-action="click->tabs#changeTab">Tab 3</a>
      </li>
    </ul>

    <div data-tabs-target="content" class="tab-content">
      <p>Tab 1 content...</p>
    </div>
    <div data-tabs-target="content" class="tab-content" hidden>
      <p>Tab 2 content...</p>
    </div>
    <div data-tabs-target="content" class="tab-content" hidden>
      <p>Tab 3 content...</p>
    </div>
  </div>