Stimulus框架下无法读取DOM元素tier-value值的问题排查

问题重现 #

HTML代码：

<form id="subscriptionForm" data-controller="subscription-form" action="/subscriptions">  
  <input type="hidden" name="product" data-subscription-form-target="product">

  <div data-subscription-form-tier-value="Production" data-subscription-form-target="tier"></div>
  <div data-subscription-form-tier-value="Test" data-subscription-form-target="tier"></div>
</form>

对应的Stimulus控制器代码：

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["tier"]

  connect() {
    this.tierTargets.forEach((element) => {
      console.log(element)
      console.log(element.tierValue)
    })
  }
}

执行时，console.log(element)能正常输出DOM节点，但console.log(element.tierValue)始终返回undefined。

问题原因 #

Stimulus不会自动将目标元素上的data-*属性挂载为DOM元素的直接属性，element.tierValue这种写法是在访问DOM元素本身不存在的原生属性，因此返回undefined。

解决方法 #

有两种可靠的方式读取目标节点的tier-value值：

方法1：使用原生DOM的dataset属性 #

HTML中的data-subscription-form-tier-value会被映射到DOM元素的dataset对象上，命名规则为去掉data-前缀后，将连字符分隔的部分转为驼峰格式，即subscriptionFormTierValue：

this.tierTargets.forEach((element) => {
  console.log(element.dataset.subscriptionFormTierValue)
})

方法2：直接使用getAttribute方法 #

直接通过完整属性名获取，无需考虑驼峰转换，写法更直观：

this.tierTargets.forEach((element) => {
  console.log(element.getAttribute('data-subscription-form-tier-value'))
})

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