为什么我会收到“目标元素丢失”错误？

Question

我的 Rails 6 应用程序出现错误，因为它找不到我的数据目标，但我不明白为什么。

\n

Chrome\xe2\x80\x99s 控制台中的错误：

\n

Uncaught Error: Missing target element "channel.messages"\n

\n

我的看法：

\n

<div class="col-sm-10" data-controller="channel" data-channel-id="<%= @channel.id %>">\n  <!-- Chat messages -->\n  <div class="pr-6 py-4 flex-1">\n    <div data-target="channel.messages">\n      <%= render @channel.messages %>\n    </div>\n        <div class="pb-6 pr-4 flex-none">\n          <div class="flex rounded-lg border-2 border-grey overflow-hidden">\n            <span class="text-3xl text-grey border-r-2 border-grey p-2">\n              <svg class="fill-current h-6 w-6 block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16 10c0 .553-.048 1-.601 1H11v4.399c0 .552-.447.601-1 .601-.553 0-1-.049-1-.601V11H4.601C4.049 11 4 10.553 4 10c0-.553.049-1 .601-1H9V4.601C9 4.048 9.447 4 10 4c.553 0 1 .048 1 .601V9h4.399c.553 0 .601.447.601 1z"/></svg>\n            </span>\n            <input type="text" class="w-full px-4" placeholder="Message <%= @other_user.name %>" />\n          </div>\n      </div>\n    </div>\n  </div>\n\n  <%= form_with model: [@channel, Message.new], data: { action: "ajax:success->channel#clearMessage" } do |form| %>\n    <%= form.text_field :body, class: "form-control", data: { target: "channel.newMessage" } %>\n  <% end %>\n</div>\n

\n

_消息部分：

\n

<div>\n  <div class="font-weight-bold"><%= message.user.name %></div>\n  <div><%= message.body %></div>\n</div>\n

\n

我的控制器：

\n

import { Controller } from "stimulus"\nimport consumer from "channels/consumer"\n\nexport default class extends Controller {\n  static targets = [ "messages", "newMessage" ]\n\n  connect() {\n    this.subscription = consumer.subscriptions.create({ channel: "MessageChannel", id: this.data.get("id") }, {\n      connected: this._connected.bind(this),\n      disconnected: this._disconnected.bind(this),\n      received: this._received.bind(this)\n    })\n  }\n\n  disconnect() {\n    consumer.subscriptions.remove(this.subscription)\n  }\n\n  _connected() {\n  }\n\n  _disconnected() {\n  }\n\n  _received(data) {\n    if (data.message) {\n      this.messagesTarget.insertAdjacentHTML('beforeend', data.message)\n    }\n  }\n\n  clearMessage(event) {\n    this.newMessageTarget.value = ''\n  }\n}\n

\n

当我检查 HTML 时，它显示：

\n

<div data-target="channel.messages">\n

\n

Answer 1

显示的代码看起来完全没问题。我唯一能想到的导致这种行为的原因是，如果您data-controller="channel"的 HTML 中有多个。