Vue.js 3輸入顯示數據在觀察更改值時不會更改

Question

我有一個TextInput組件，並且基於Vue docs ，我將v-model添加到我的組件中。

這是我的組件：

<template>
    <div class="floating_input">
        <input type="text" :id="id" :name="name" :key="id" class="form_input"
               :placeholder="label" v-model="value">
        <label class="floating_label" :for="id">{{ label }}</label>
    </div>
</template>

<script setup>
    import { defineProps, defineEmits, computed } from "vue";

    const props = defineProps({
        label: {
            type: String,
            required: false
        },
        id: {
            type: String,
            required: true
        },
        name: {
            type: String,
            required: true
        },
        modelValue: String
    });
    const emit = defineEmits(['update:modelValue']);
    
    const value = computed({
        get() {
            return props.modelValue
        },
        set(value) {
            emit('update:modelValue', value)
        }
    })
</script>

在另一個組件中，我使用觀察器檢查如果值不是數字，則使用oldValue作為該組件的值。 最后，當我輸入一個字母時，一切都是正確的， oldValue被認為是currentValue ，但顯示的值是錯誤的並且也顯示了字母。

這是 Vue 開發工具中顯示的內容：

這就是瀏覽器中顯示的內容

Answer 1

為什么要關注價值，而不是使用內置功能？

...
<input type="number" v-model.number="value">
...