How to use useFieldArray with normal <input and v-model />

[thamibn]

Hi,

i am having "VueCompilerError: v-model value must be a valid JavaScript member expression."

when i am using the below code

<el-input clearable size="small" type="text"
                                      class="mb-2 w-full block" v-model="`deliveries[${idx}].delivery_period`"/>

how can i expose deliveries from useFieldArray('deliveries') so it can be available to the template and i can use it on v-model without using this syntax 'deliveries[${idx}].delivery_period' cause now i cannot type on the input.

when i use Component it does work but problem is the style is off so i want to use which is styled nice and have more features.

this does work fine. problem is css style is going to be different and i cannot afford that.

<Field :name="`deliveries[${idx}].branch`" type="text" />

[logaretm]

You can try rendering the input element with Field component:

<Field as="el-input" clearable size="small" :name="`deliveries[${idx}].branch`" type="text" />

Or create a custom useField component that uses the el-input element. The official vee-validate examples for element plus have a few ways you can integrate vee-validate with it.

---

Or If you handle it manually, you will have to break up the v-model directive. I didn't try this out personally but it should work:

// in setup
const { fields, update, insert } = useFieldArray('deliveries');

function handleInputChange(idx, value) {
  if (!fields.value[idx]) {
    insert(idx, { branch: value });
    return;
  }

   update(idx, value);
}

<el-input @update:modelValue="handleInputChange">

I might experiment with changes to allow mutating the field value directly with v-model but will probably land in 4.6 which isn't planned yet.

[thamibn]

100%

<Field :name="`deliveries[${idx}].branch`" v-slot="{ value, field, errorMessage }" > <el-input clearable size="small" type="text" class="mb-2 w-full block" v-bind="field" :model-value="value"/> </Field>
I just did the above all is working fine now thank you very much.

[logaretm]

You are welcome, I just realized it can be much easier to use useFieldArray without Field or useField.

This should be possible in 4.6 (no release date yet):

  <Form :initial-values="initial" @submit="onSubmit">
    <FieldArray name="users" v-slot="{ fields }">
        <div v-for="(field, idx) in fields" :key="field.key">
         <!-- Directly bind the input to the iterable `value`  -->
          <input v-model="fields[idx].value" />
        </div>
    </FieldArray>
    <button>Submit</button>
</Form>

You can track the progress in #3618

[eMeRiKa13]

Thanks for this code. This is exactly what I was looking for! It works.

One more question, how do you handle the validation of these nested data? With a dynamic validationSchema like in this post #3283 (comment)?

[logaretm]

Usually using a form-level validation schema is the way to go here. Otherwise, use the field component and provide the rules. The sample you've given is one way to do it.

But yup allows you to create array schemas, so you can do this:

const schema = Yup.object({
  users: Yup.array().of(Yup.object({
   name: Yup.string().required()
  }))
})

So you don't need to dynamically add rules each time you add/remove an element.

[eMeRiKa13]

Thank you for your answer. It works perfectly.