I recently implemented a TextInput component and followed the instructions in the Vue documentation by adding the v-model directive to my component.
Here is the code snippet of my component:
<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>
In another component, I have set up a watcher to check if the value entered is not numeric, in which case it reverts back to the oldValue.
However, when I enter a letter, although the logic works correctly and sets the oldValue as the currentValue, the displayed value on screen also shows the letters.
When inspecting Vue dev tools, this is what is seen:
https://i.sstatic.net/W02cI.png
And this is what appears in the browser:
https://i.sstatic.net/lrKaH.png