Submit a form with table rows with Vue and Inertia

Question

Using Vue.jsm inertiaJS and Laravel.

I have a VueJS Js page on which i have a form with a table which has multiple rows. I fill each input field on those rows with data coming from the backend.

So, every row has the same fields (account name, description, amount), coming from a number of transactions. So each row represents a transaction. Displaying the transactions work fine.

But, the user may change those values (that’s the purpose), how can i with the help of inertia send the whole form including the rows and their values to the backend for processing and saving into the database?

The inertiaJS docs for forms speaks of using the useForm helper, or reactive. (https://inertiajs.com/forms)

But, as far as i understand it, you have to know each input field up front ánd they need to be named uniquely.

Can someone help me? What i want is for the user to be able to change the values displayed inside of the table row inputs and that that person can click on the save button, which in turn sends the current input values to the backend using inertiaJS.

Any help would be greatly appreciated, i have been plowing through examples on the web, but they all talk about sending input values which are declared inside of the form const. But i have a table with rows. Thanks for any help!

Simplified example code:

<script setup>
    import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
    import {Head, router, Link} from '@inertiajs/vue3';
    import {ref} from "vue";

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


const form = reactive({
  Account.name: null,
  Transaction.description: null,
  Transaction.amount: null,
})

function submit() {
  router.post('/users', form)
}


</script>

<template>
    <AuthenticatedLayout>
        <div class="py-12">
            <div class="mx-auto max-w-8xls sm:px-6 lg:px-8">
                <div class="overflow-scroll bg-white shadow-sm sm:rounded-lg">

                    <form @submit.prevent="submit">
                        <table class="table-auto">
                            <thead>
                                <tr>
                                    <th class="text-left">Account</th>
                                    <th class="text-left">Description</th>
                                    <th class="text-right">Amount</th>
                                </tr>
                            </thead>
                            <tbody>

                                <tr v-for="Transaction in Transactions">
                                    <td>
                                        <select v-model="Transaction.account">
                                            <option v-for="Account in Accounts" v-bind:value="Account.id" > {{ Account.name }} </option>
                                        </select>
                                    </td>

                                    <td>
                                      <input type="text" id="fname" name="fname" data-1p-ignore v-model="Transaction.description" class="text-left">
                                    </td>
                                    <td>
                                      <input type="text" id="fname" name="fname" data-1p-ignore v-model="Transaction.amount" class="text-right">
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                        <button type="submit" class="mb-4 inline-block rounded-md bg-blue-500 px-4 py-3 text-xs font-semibold uppercase tracking-widest text-white shadow-sm">Save</button>
                    </form>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

AhMing · Accepted Answer · 2025-04-04 16:10:51Z

If you wish to use the useForm from Inertia.js, you should define it like this:

const form = useForm({
    accountName: null,
    transactionDescription: null,
    transactionAmount: null,
})

And apply it to the template with child component (TransactionRow.vue), which place the save button inside the table for saving each row:

<script setup>
import { useForm } from '@inertiajs/vue3'

const props = defineProps({
    transaction: {
        type: Object,
        default: null,
    },
    accounts: {
        type: Arrays,
        default: null,
    },
})

const form = useForm({
    accountName: null,
    transactionDescription: null,
    transactionAmount: null,
})

function submit() {
    form.post('/users', form)
}
</script>

<template>
    <tr>
        <td>
            <select v-model="form.accountName">
                <option v-for="account in accounts" v-bind:value="account.id">
                    {{ account.name }}
                </option>
            </select>
        </td>

        <td>
            <input
                type="text"
                id="fname"
                name="fname"
                data-1p-ignore
                v-model="form.transactionDescription"
                class="text-left"
            />
        </td>

        <td>
            <input
                type="text"
                id="fname"
                name="fname"
                data-1p-ignore
                v-model="form.transactionAmount"
                class="text-right"
            />
        </td>

        <td>
            <button
                type="button"
                class="mb-4 inline-block rounded-md bg-blue-500 px-4 py-3 text-xs font-semibold uppercase tracking-widest text-white shadow-sm"
                @click="submit"
            >
                Save
            </button>
        </td>
    </tr>
</template>

Parent component:

<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import TransactionRow from '@/TransactionRow.vue'

const props = defineProps({
    transactions: {
        type: Array,
        required: true,
    },
    accounts: {
        type: Array,
        required: true,
    },
})
</script>

<template>
    <AuthenticatedLayout>
        <div class="py-12">
            <div class="mx-auto max-w-8xls sm:px-6 lg:px-8">
                <div class="overflow-scroll bg-white shadow-sm sm:rounded-lg">
                    <table class="table-auto">
                        <thead>
                            <tr>
                                <th class="text-left">Account</th>
                                <th class="text-left">Description</th>
                                <th class="text-right">Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <TransactionRow
                                v-for="transaction in transactions"
                                :transaction="transaction"
                                :accounts="accounts"
                            />
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

There is a few rules you have to follow:

The variables should return using camelCase instead of PascalCase , if not the component props cannot be passed properly.
You have incorrect syntax when trying to define the reactive variable, the object passed has syntax error which you cannot define a key as Transaction.description , you should define the key as transactionDescription instead.
I assume that the accounts and transactions you trying to pass are supposed to be Array instead of Object, define the correct type for better documention and maintaince in the future.

Hope this answer helps you.

Dave33 · Accepted Answer · 2025-04-02 16:59:57Z

-2

Ok, sometimes it helps to do something else and come back. It is working now.
And it's stupidly simple but i couldn't get my mind straight.

I'll post my solution in case anyone has the same issue as me in the future.
I added a ref to the transactions:

    const Transactions = ref(props.Transactions);

And the submit function as:

    function submit() {

        router.post ( '/TransactionSave',
            {
                Transactions:   Transactions.value,
            },
        );
    }

After that the transactions inside of the controller can be fetched by doing:

    public function TransactionSave( Request $request )
    {

        dd($request->Transactions);
    }

answered Apr 2 at 16:59

Dave33

4859 silver badges19 bronze badges

Collectives™ on Stack Overflow

Submit a form with table rows with Vue and Inertia

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related