How to implement model based initial value with v.4.9.4

[AngeloBadellino]

Vue: 3.2.36
VeeValidate: 4.9.4

We have a component using the OptionAPI that contains a Form like

      <Form @submit="submit" v-slot="errors" class="input-fields">
        <input-component v-model="this.form.firstName" :fieldName="firstNameF" :rules="`required|max:20`" :type="text" :errors="errors"/>
        />
      </Form>

I cannot make the input component show the initial value. It does look like:

<template>
    <label class="form-input-label" :class="{ 'is-error': errors.errors[fieldName] }">
        <small class="form-input-title d-block" :class="{ 'is-error': errors.length > 0 }">{{ fieldName }}</small>
        <Field
            v-if="isEdit"
            :type="type"
            :name="fieldName"
            :value="this.modelValue"
            :rules="rules"
            class="form-input-field d-block"
        />
        <div v-else class="inactive-form-value">{{ valueOrPlaceholder }}</div>
        <small v-if="errors.errors[fieldName]" class="form-input-error" :name="fieldName" v-html="errors.errors[fieldName]"></small>
    </label>
</template>

where this.modelValue is a component property.

Can you help me fix that?

[logaretm]

Moved this to a discussion since it is more of a question than an issue.

You got a few options here:

• Either use :model-value instead of :value on the Field component.
• Use Form's initialValues prop.
• Use useField instead of Field in your custom input component and turn on syncVModel.