如何从Stimulus控制器中正确读取Value值？

你当前的问题核心是把Values属性放错了位置——Stimulus的Values属性必须直接绑定在控制器所在的根元素上，而不是子元素上。

修正后的代码示例 #

HTML

<div data-controller="admin-invoice-form" data-admin-invoice-form-amount-discounted-total-value="100">
  <!-- 子元素不需要带Values属性 -->
  <div></div>
</div>

Stimulus控制器

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { amountDiscountedTotal: Number }

  connect() {
    // 直接通过驼峰式访问器读取值，会自动转成Number类型
    console.log(this.amountDiscountedTotalValue);
    // 输出: 100
  }
}

关键注意事项 #

• Values属性命名规则：data-[控制器名]-[驼峰转短横线]-value，对应控制器里的驼峰式属性名
• 类型自动转换：如果定义了Number类型，Stimulus会自动把HTML里的字符串值转成数字
• 可选默认值：如果需要给Value设置默认值，可这样写：

  static values = { amountDiscountedTotal: { type: Number, default: 0 } }
  

内容的提问来源于stack exchange，提问作者raphael-allard