为何Stimulus将传入的数值读取为字符串而非数字？

核心原因 #

你当前读取的是DOM输入元素本身的原生属性值，而非Stimulus通过data-*-value绑定解析后的数值。HTML规范中，所有元素的属性值本质上都是字符串类型——哪怕你传入的是数字，浏览器也会自动将其转为字符串存储，所以直接取selectorTarget.value/min/max得到的必然是字符串。

而你在控制器里定义的static values配置，是用来解析data-selector-value这类Stimulus专属属性的，解析后的数值类型值需要通过Stimulus提供的专属语法访问，而非直接操作DOM元素属性。

解决方案 #

1. 访问Stimulus解析后的数值

使用控制器实例的[name]Value属性（对应static values中定义的字段名），这些值已经被Stimulus自动转为你指定的Number类型：

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {

  static targets = ['selector'];
  static values = {
    value: Number,
    min: Number,
    max: Number
  }

  test() {
    console.log({
      value: this.valueValue,
      typeofvalue: typeof(this.valueValue), // 输出 "number"
      min: this.minValue,
      typeofmin: typeof(this.minValue), // 输出 "number"
      max: this.maxValue,
      typeofmax: typeof(this.maxValue) // 输出 "number"
    })
  }
}

2. 同步DOM输入值到Stimulus（可选）

如果需要将用户修改的输入值同步到Stimulus的valueValue，可以监听输入事件并手动转换类型：

// 控制器中新增方法
handleInput() {
  // 把DOM字符串值转为数字后赋值给Stimulus value
  this.valueValue = Number(this.selectorTarget.value);
}

同时在HTML元素上添加事件绑定：

<input type="text"
       <!-- 其他属性保持不变 -->
       data-action="input->selector#handleInput">

3. 优化输入类型（可选）

如果是纯数字输入场景，建议将type="text"改为type="number"，浏览器会提供原生数字输入体验，同时减少非数字内容的输入：

<input type="number"
       id="{{ id }}"
       name="{{ id }}"
       min="{{ min }}"
       max="{{ max }}"
       value="{{ value }}"
       data-selector-target="selector"
       data-selector-value="{{ value }}"
       data-selector-min="{{ min }}"
       data-selector-max="{{ max }}"
       class="selector p-1 w-9 text-center">

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