Vuetify v-number-input失焦时不显示小数的问题咨询

问题现象 #

使用Vuetify的v-number-input组件，设置step="0.001"和min="1.020"后，聚焦时通过微调按钮可按0.001步长调整数值（如从1.036增至1.037），但失焦后显示的数值变为1，再次聚焦又恢复为1.037，该现象反复出现。

核心原因 #

这是因为v-number-input组件默认会根据内置规则自动格式化数值，未显式指定小数精度时，组件失焦后的格式化逻辑会将带三位小数的数值截断为整数显示，但实际绑定的model值并未改变，所以再次聚焦时会显示真实的绑定值。

另外，若绑定的model初始值为整数类型（比如1而非1.000），会进一步触发组件的自动格式化逻辑，加重该问题。

解决办法 #

• 显式设置precision属性：由于step为0.001，对应需要保留3位小数，添加:precision="3"强制组件始终显示三位小数：

<v-number-input v-model="model" :step="0.001" :min="1.020" :precision="3" />

• 确保绑定值初始类型为小数：定义model时将初始值设为带三位小数的数值，示例如下：

// Vue 2/3 示例
data() {
  return {
    model: 1.020 // 不要用整数1
  }
}

设置完成后，组件失焦时会正确保留三位小数，不会再出现显示数值跳变的问题。

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