刺激物未从 html 获取值

Question

我正在做一个基本的控制器，并尝试从 HTML 中获取带有标签值的数据。

问题是数据总是空的

<div data-controller="selectable">
  <div class="flex" data-selectable-iconurl="test" data-selectable-iconurl-value="test">
     something here
  </div>
</div>

请注意，我对值标签（来自不同的帖子）进行了多种组合，以验证其中一个是否正常工作。

现在，当我尝试访问控制器中的值时始终为空

// selectable_controller.js

import {Controller} from "@hotwired/stimulus"

export default class extends Controller {
  static values = {iconurl: String }

  connect() {
    console.log(this.iconurlValue)
  }

}

我仔细检查了文档，找不到为什么该值没有传递到控制器并且始终为空

Answer 1

当刺激控制器与值位于同一元素上时，您应该能够检索该值：

<div data-controller="selectable" data-selectable-iconurl-value="test">

如果您的值需要在子元素上设置，那么我建议仅以旧方式访问它：

console.log(this.element.querySelector("div").dataset.selectableIconurlValue)

尽管您的值可能只是被视为常见的 JS 数据集组件。您将失去 Turbo 的所有优点，例如观察值的任何变化：https://dev.to/borama/stimulus-2-0-value-change-callbacks-what-are-they-good-for-4kho

不确定为什么刺激手册中没有精确说明所需值的位置。也许我也错了，有一种方法可以让 Stimulus 承认这一点......