调用Stimulus控制器方法报错，已排查常规操作仍未解决

API 探路者

2026-8-25

Stimulus控制器点击Action报错的可能原因

已确认作用域、方法名称正确，Stimulus控制器已成功注册，执行yarn install并重启服务器后，点击按钮仍触发控制台报错。相关代码如下：

HTML代码

<div data-controller="logs">
      <a class="button is-info is-outlined ml-2 mb-2" data-action="click->logs#displayGraph" data-logs-target="graph_button">Graph</a>
      <div data-logs-target="graph_visualization" class="is-hidden"><h1>GRAPH GOES HERE..</h1></div>
    </div>

Stimulus控制器代码

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="logs"
export default class extends Controller {
  static targets = ["graph_visualization", "graph_button" ]

  displayGraph() {
    this.graph_visualizationTarget.classList.toggle("is-hidden")
    this.graph_buttonTarget.classList.toggle("is-focused")
  }
}

可能的报错原因：

Target访问命名错误：Stimulus会自动将static targets中的蛇形命名（如graph_visualization）转换为驼峰式命名的访问器，正确写法应为this.graphVisualizationTarget和this.graphButtonTarget，而非保留下划线的graph_visualizationTarget和graph_buttonTarget。这是最可能触发控制台报错（如Cannot read properties of undefined）的原因。
控制器文件命名/路径不符：尽管确认控制器已注册，仍需检查控制器文件是否遵循Stimulus默认约定——文件名应为logs_controller.js，且放置在app/javascript/controllers/目录下（或项目配置的Stimulus控制器加载路径），文件命名错误会导致控制器实际未正确绑定。
类名缺失（非直接报错原因）：如果is-focused类未在样式表中定义，虽不会触发JS控制台报错，但会导致按钮样式无变化，可顺带确认该类名是否存在。