如何立即更新 PrimeVue InputNumber 参考？

Question

在 vanilla Vue 和 PrimeVue 中，使用 InputText 时，会立即应用更改，在您键入时更新链接引用的值。但是，对于 InputNumber，更改不会立即应用；它们仅在您按 Enter 时更新。为什么会发生这种情况？如何才能立即应用它？

输入文本示例

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')
import InputText from 'primevue/inputtext'
</script>

<template>
    <h1>{{ msg }}</h1>
    <InputText v-model="msg" />
</template>

输入数字样本

<script setup>
import { ref } from 'vue'

const msg = ref(42)
import InputNumber from 'primevue/inputnumber'
</script>

<template>
    <h1>{{ msg }}</h1>
    <InputNumber v-model="msg" />
</template>

Answer 1

看起来这是该组件中的一个功能，我阅读了组件 API，没有什么可以禁用此行为，但如果您想立即获得更新，请尝试使用

@input

事件与

:model-value

:

<script setup lang="ts">
import { ref } from 'vue';

const msg = ref(5);
</script>

<template>
  <main>
    <h1>Playground</h1>
    <InputNumber :model-value="msg" @input="(e) => (msg = e.value)" />
    <p>{{ msg }}</p>
  </main>
</template>