在 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>
看起来这是该组件中的一个功能,我阅读了组件 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>