Dynamically Add Form Field

[liam-ot]

Hey Guys,

So I have a CRM which relies on the inertia form helper to submit data to the controller for updating and creating new database records in a Vue/Inertia/Laravel/MySQL (VILM) application stack

There is a case where updating or creating a new record, lets call it's type Foo, requires a varying number of images associated with the record

Right now, it is set up so that the employees can create/update the record with a max of 5 pictures at a time, achieved like so

...
<FileInput v-model="form.fooImage1" type="file" :error='form.errors.fooImage1' label='Foo Image'/>
<FileInput v-show="form.fooImage1" v-model="form.fooImage2" type="file" :error='form.errors.fooImage2' label='Foo Image'/>
<FileInput v-show="form.fooImage2" v-model="form.fooImage3" type="file" :error='form.errors.fooImage3' label='Foo Image'/>
<FileInput v-show="form.fooImage3" v-model="form.fooImage4" type="file" :error='form.errors.fooImage4' label='Foo Image'/>
<FileInput v-show="form.fooImage4" v-model="form.fooImage5" type="file" :error='form.errors.fooImage5' label='Foo Image'/>
...

basically it always allows one image to be uploaded and adds a new slot each time a picture is uploaded up to 5 pictures

the form looks like this:

...
data () {
    return {
        form: this.$inertia.form({
            # other Foo info
            ...
            fooImage1: null,
            fooImage2: null,
            fooImage3: null,
            fooImage4: null,
            fooImage5: null,
        }),
    }
},
...

it would be awesome if instead there was a way i could dynamically add fields to the inertia form through an add() method, something like this:

# this.photos would be referencing a prop on the page which tracks the number of photos so the form field 
# is indexed as it is in my example above
addPhoto(){
    this.photos += 1;
    this.form.add('projectImage'+String(this.photos), null)
}

where the add() takes two inputs, the name of the field being added and the value of the field to be added

this would be great to have, not sure of how it would be implemented in order to preserve the state of the inertia form because of course in a case where it is updating a record, the form is pre-filled with the data in the db, so if a change is made to the form and then a photo added, thus changing the form structure to include another field, it would need to preserve the other changes previously made to the form

hope this gets considered and until then i will stick with my dynamic-ish approach to adding 5 at a time

thanks again for all the hard work this team puts in