如何让PrimeVue InputNumber的ref值即时更新？

原因分析 #

• InputText作为纯文本输入组件，无需严格格式校验，默认监听input事件实时同步输入内容到绑定的ref。
• InputNumber默认的更新触发时机是失去焦点（blur）或按下回车键（enter），这是组件的设计逻辑：它需要先验证输入内容是否为合法数字，避免用户输入过程中（比如输入小数点、负号的中间状态）把无效值同步到绑定变量，保证数据的有效性。

实现即时更新的方法 #

通过给InputNumber组件设置event="input"属性，强制组件监听input事件，在用户每一次输入时同步更新绑定的ref值：

修改后的InputNumber示例 #

<script setup>
import { ref } from 'vue'
import InputNumber from 'primevue/inputnumber'

const msg = ref(42)
</script>

<template>
    <h1>{{ msg }}</h1>
    <!-- 配置event="input"实现实时更新 -->
    <InputNumber v-model="msg" event="input" />
</template>

额外说明 #

如果需要允许输入框为空值，可以搭配allowEmpty属性使用：

<InputNumber v-model="msg" event="input" allowEmpty />

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