刺激没有从 html 中获取值答案

【问题标题】：Stimulus not geting values from html刺激没有从 html 中获取值
【发布时间】：2022-09-27 20:01:53
【问题描述】：

我正在做一个基本的控制器并尝试从带有标签值的 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)
  }

}

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

标签： ruby-on-rails stimulusjs

【解决方案1】：

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

<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 承认它......

【讨论】：