CODEWITHSUNDEEP
vuejs3nuxt3.jsvee-validate
A456B123
A456B123

Reputation: 95

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.

Upvotes: 0

Views: 266

Answers (1)

yoduh
yoduh

Reputation: 14709

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

Upvotes: 1

Related Questions