I have the following text input in Vue 3 (Nuxt 3):
<template>
<input style="background-color: aqua;" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
<Field style="background-color: beige;" type="text" name="name" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<script>
export default {
emits: ['update:modelValue'],
props: {
modelValue: String,
}
};
</script>
I use it here at this point (e.g. some page...):
<template>
<div class="w-full md:w-1/2">
<text v-model="user.name">
</text>
</div>
</template>
<script>
export default {
data() {
return {
user: {},
}
},
mounted() {
this.user.name = "mounted"
},
created() {
this.user.name = "created"
},
}
</script>
The native input component works as expected. "mounted" is displayed here as a value. "Field" from Vee Validate, on the other hand, no longer seems to react to changes after created.
Can you tell me what I am doing wrong?
The blue one is the native input component. The brown one is Vee Validate.
Field
input value prop is model-value
<Field
style="background-color: beige"
type="text"
name="name"
:model-value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
/>