POST only updated/changed Form Data fields

Well the basic idea is that you need to keep track which fields have been changed. You can probably just keep a list of those fields in an array. You can probably get away by using an onchange event on all your inputs.

Another quick solution would be keeping a copy of the original data set. You can then compare and see if any of the values has changed and only send the changed values to your backend.

You could save the original formData on the mounted lifecycle hook, and have a computed property that compares the original formData to the current formData and returns only the changed fields.

It depends on how you set your form up. I'll try to set up an example

@bobbybouwmann was faster than me. When I started writing his answer was not there yet. But basically the same idea.

@BOBBYBOUWMANN - yeah I though of something along these lines, I was just hoping there was some magic vue API handling that for me ¯_(ツ)_/¯

@RODRIGO.PEDRA - thanks Rodrigo

There is no magic available in there. The natural form of a form is sending all data, so it's understandable that Vue is not doing this for you by default ;)

Hi @ozne I am waiting for a meeting so I took the time to scratch the idea for both methods. Not ideal code but could give you an idea.

Method 1: compare original and current formData

<template>
    <form @submit.prevent="handleSubmit()">
        <p>
            name: <input type="text" required v-model="currentFormData.name">
        </p>
        <p>
            email: <input type="email" required v-model="currentFormData.email">
        </p>
        <p>
            <button type="submit">Submit</button>
        </p>
        <hr>
        <pre>{{ changedFormData }}</pre>
    </form>
</template>

<script>
export default {
    name : 'MethodOneForm',

    props : {
        formData : { type : Object, default : () => ({}) }
    },

    data () {
        return {
            currentFormData  : { ...this.formData },
            originalFormData : { ...this.formData },
        };
    },

    computed: {
        changedFormData () {
            return Object.keys( this.currentFormData ).reduce( ( formData, field ) => {
                if ( this.currentFormData[ field ] !== this.originalFormData[ field ] ) {
                    formData[ field ] = this.currentFormData[ field ];
                }

                return formData;
            }, {} );
        },
    },

    methods : {
        handleSubmit () {
            if ( Object.keys( this.changedFormData ).length === 0 ) {
                alert( 'No changes' );
                return;
            }

            console.log( 'submit', this.changedFormData );
        },
    },
};
</script>

Method 2: keep track of changed fields using events

<template>
    <form @submit.prevent="handleSubmit()">
        <p>
            name: <input type="text" required v-model="currentFormData.name" @input="handleChange('name')">
        </p>
        <p>
            email: <input type="email" required v-model="currentFormData.email" @input="handleChange('email')">
        </p>
        <p>
            <button type="submit">Submit</button>
        </p>
        <hr>
        <pre>{{ changedFormData }}</pre>
    </form>
</template>

<script>
export default {
    name : 'MethodTwoForm',

    props : {
        formData : { type : Object, default : () => ({}) }
    },

    data () {
        return {
            currentFormData : { ...this.formData },
            changedFields   : [],
        };
    },

    computed : {
        changedFormData () {
            return this.changedFields.reduce( ( formData, field ) => {
                formData[ field ] = this.currentFormData[ field ];

                return formData;
            }, {} );
        },
    },

    methods : {
        handleSubmit () {
            if ( this.changedFields.length === 0 ) {
                alert( 'No changes' );
                return;
            }

            console.log( 'submit', this.changedFormData );
        },

        handleChange ( changedField ) {
            const results = this.changedFields.filter( ( field ) => field !== changedField );

            if ( this.currentFormData[ changedField ] !== this.formData[ changedField ] ) {
                results.push( changedField );
            }

            this.changedFields = results;
        },
    },
};
</script>

Hope it helps

EDIT:

Improved the MethodTwoForm handleSubmit method guard clause to use the changedFields array. As I copied and pasted from MethodOneForm I missed that.

Also, here is the view I used to test them:

@extends('layouts.app')

@section('content')
    <method-one-form :form-data="{name:'Rodrigo'}"></method-one-form>
    <method-two-form :form-data="{name:'Rodrigo'}"></method-two-form>
@endsection

@rodrigo.pedra Awesome job on the example :thumbs_up: