How to populate form field with dynamic data using Vuejs

Question

I’m new to Vuejs and starting to develop an application using laravel8 + Inertiajs + Vue3. Currently I’m stuck with the following situation:

I have a loop of data data populate a list of products as cards. Any card shows product information and a button to get more info by filling a modal form with some personal data. In order to avoid repetitions I made a modal component which is working fine just for an essential detail, I need to add product 'id' to data sent by the form so I added a hidden 'id' field to the form, and registered it in data() function. The only way I found to fill 'id' field with product id is passing it as prop to my component and then binding its value to 'id' field, but that value is not sent when submitting the form.

My actual code is:

<template>
<div v-if="showing"
    class="fixed inset-0 w-full h-screen flex items-center justify-center bg-gray-100 bg-opacity-90"
    >
        <div class="p-4 lg:p-8 bg-white rounded-lg shadow-xl">
            <section class>
                <form @submit.prevent="submit">
                    <div class="mt-4">
                        <Input
                            id="id"
                            type="hidden"
                            v-model="form.id"
                            :value="promo.id"
                        />
                    </div>
                    <div class="mt-4">
                        <Label for="name" value="Name" class="hidden" />
                        <Input
                            id="name"
                            type="text"
                            class="block w-full"
                            v-model="form.name"
                            required
                            placeholder="Name"
                            autocomplete="name"
                        />
                    </div>
                    <div class="mt-4">
                        <Label for="email" value="Email" class="hidden" />
                        <Input
                            id="email"
                            type="email"
                            class="block w-full"
                            v-model="form.email"
                            required
                            placeholder="Email"
                            autocomplete="email"
                        />
                    </div>                  
                    <div class="mt-4">
                        <button
                            type="reset"
                            aria-label="close"
                            class="button-secondary mr-4"
                            @click="close"
                        >Cancelar</button>
                        <button type="submit" class="button-primary">Submit request</button>
                    </div>
                </form>
            </section>
        </div>
    </div>
</template>

<script>
import { useForm } from "@inertiajs/inertia-vue3";
import Button from "@/Components/Button.vue";
import Input from "@/Components/Input.vue";
import Label from "@/Components/Label.vue";

export default {
    components: {
        Button,
        Input,
        Label,
    },
    props: {
        promo: "",
        showing: {
            required: true,
            type: Boolean
        }
    },
    data() {
        return {
            form: this.$inertia.form({
                id: "",
                name: "",
                email: "",
            }),
        }
    },
    methods: {
        submit() {
            this.form.post(this.route("promotion.submit-request"), {
                preserveScroll: true,
                onSuccess: () => this.form.reset(),
            });
        },
        close() {
            this.$emit('close');
        }
    }
}
</script>

At this stage, the form is submited and laravel receives data array with fields values, except id

#content: "{"id","name":"farid","email":"farid@email.com"}"

I must say that if I change field type from hidden to text, it shows the id passed from props so I can’t understand why is not submited with data array. Additionally if I remove data binding and manually fill ‘id’ field, its value is sent correctly to backend with data array.

Any ideas on how to solve it?

Thank you in advance.

Answer 1

Just for future reference, I found a solution in inertiajs documentation. https://inertiajs.com/forms

There is a transform() method on Form helper that makes the trick when submitting the form:

methods: {
    submit() {
        this.form
            .transform((data) => ({
                ...data,
                id: this.promo.id,
            }))
            .post(this.route("promotion.submit-request"), {
                preserveScroll: true,
                onSuccess: () => form.reset(),
            });
    },
    close() {
        this.$emit('closeModal');
    }
}

In that way promo.id is added to data array just in the submission event and everything works fine.