Rails 7中Stimulus控制器无法识别HTML目标问题求助

核心问题是HTML中目标元素的属性格式不符合Stimulus规范。

Stimulus对目标元素的属性命名有严格要求：必须使用 data-[控制器名称]-target 的格式，其中控制器名称要和data-controller的值一致（这里是room）。你的代码里直接用了data-target，导致控制器无法识别这些目标元素。

修正后的HTML结构 #

<div data-controller="room">
  <p>Joined users: <span data-room-target="users"></span></p>
  <p>Room ID: <span data-room-target="roomId"></span></p>
</div>

额外排查点（如果修正后仍有问题） #

• 确认页面加载时，这些目标元素已经存在于DOM中。如果是动态渲染的元素（比如通过Turbo Stream加载），可以在控制器中使用hasUsersTarget来判断目标是否存在后再操作，避免报错：

  connect() {
    if (this.hasUsersTarget) {
      console.log("Users target exists: ", this.usersTarget);
    }
  }
  

• 检查控制器是否正确导入并注册到Stimulus应用中，确保没有拼写错误。

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