Can't define field names of dynamically added input fields in yup schema

[ValentineSean]

I have file input fields that are dynamically rendered according to an array's elements.

<template>
    <Form :validation-schema="schema">
        <div class="form-group" v-for="document in documents" :key="document.id">
            <Field type="file" id="calculated-loan-purpose" name="document.id"  />
            <ErrorMessage name="document.id" class="input-group text-danger" /><br>
        </div>
    </Form>
</template>`

`<script>
    import { Form, Field, ErrorMessage } from "vee-validate";
    import * as yup from "yup";
    export default{
        components: {Form, Field, ErrorMessage},
        data(){
            const schema = {
                //dynamic field names
                document_id: yup.mixed().required()
            }
        }
    }
</script>

How can I define dynamic field names in the schema.

[logaretm]

This is a question and belongs to the discussion section, not an issue.

You can use a computed property to create a dynamic schema:

{
  computed: {
    schema() {
      // construct your schema here
      return yup.object(this.documents.reduce((schema, document) => {
        schema[document.id] = yup.mixed().required();
        
        return schema;
      }, {}));
    }
  }
}

[ValentineSean]

Exactly what I was looking for, thanks.