Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

elbsurfer's avatar

Inertia best practise for props and forms?

Hey there,

I have a general question regarding the best practise for working with Inertia, it's form helper and using several components in a form. So, imagine I have a component like this:

Form.vue

const props = defineProps({
    person: {
        type: Object,
        required: true,
    },
})

const form = useForm('Person/Edit', {
    person: props.person,
});

<FormTextInput
    label="Vorname"
    identifier="first_name"
    v-model="form.person.first_name"
>
</FormTextInput>

If the person is coming into the component via a prop and I want to modify the data using input fields and then I want to send this data to the backend, what's the best approach to achieve this?

Here for example, I pass the value of the prop into the useForm helper and use the form in v-model to pass the data to the input field and let the text field modify the data.

Is this the usual approach of solving this?

0 likes
5 replies
martinbean's avatar

@elbsurfer Your input should have a name attribute. When the form is submitted, the name will then be the key in the request data, and the value will be whatever the v-model value is:

<input type="text" name="first_name" v-model="form.person.first_name">

Personally I explicitly set keys in the form object, rather than just passing an object, but I also use TypeScript and types:

type Person = {
    id: string;
    given_name: string;
    family_name: string;
    email: string;
};

const props = defineProps<{
    person: Person;
}>();

const form = useForm(`EditPerson:${person.id}`, {
    given_name: props.person.given_name,
    family_name: props.person.family_name,
    email: props.person.email,
});
1 like
elbsurfer's avatar

@martinbean Thanks!

One last question, what do you do when you have the Form.vue and within this Component you call FormTextInput but you put the input in another child component? Can you call v-model for both children components like this:

Form.vue:

<FormTextInput
    type="text"
    label="Vorname"
    identifier="first_name"
    v-model="form.person.first_name"
>
</FormTextInput>

FormTextInput.vue

defineProps({
    modelValue: {
        type: String,
        required: true,
    },
...
});

<TextInput
    v-model="modelValue"
    :identifier="identifier"
    :error="!!error"
>
</TextInput>

Textinput.vue

defineEmits(['update:modelValue']);

<template>
    <input
        :name="identifier"
        :id="identifier"
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
    />
</template>
martinbean's avatar

@elbsurfer You just need to keep passing the modelValue prop down to child components, and keep sending update:modelValue events from child to parent components.

elbsurfer's avatar

@martinbean So basically it will look like this then:

I pass the value into the parent component as v-model and then I just use :value (or :modelValue) and an event to pass modelValue up, right?

Form.vue:

<FormTextInput
    type="text"
    label="Vorname"
    identifier="first_name"
    v-model="form.person.first_name"
>
</FormTextInput>

FormTextInput.vue

defineProps({
    modelValue: {
        type: String,
        required: true,
    },

defineEmits(['update:modelValue']);
});

<TextInput
     :modelValue="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
    :identifier="identifier"
    :error="!!error"
>
</TextInput>

Textinput.vue

defineProps({
    modelValue: {
        type: String,
        required: true,
    },

defineEmits(['update:modelValue']);

<template>
    <input
        :name="identifier"
        :id="identifier"
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
    />
</template>

Please or to participate in this conversation.