vuejs3nuxt3.jsvee-validate

Vee Validate 4 - modelValue not working at mounted


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?

enter image description here

The blue one is the native input component. The brown one is Vee Validate.


Solution

  • 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)"
    />