Laravel 10控制器接收原始行数据而非表单数据问题排查

在Laravel 10项目中，使用Vue、Inertia.js和Ziggy技术栈时，出现控制器的$request变量存储数据库原始行数据，而非表单提交的修改后数据的异常情况。执行dd($request->all())输出的是编辑前的原始对象，手动替换get()返回值为固定内容时save()方法可正常执行，但无法获取用户修改后的表单值。

核心原因分析 #

• 表单数据绑定错误：前端输入框的v-model绑定到了organisation对象（数据库原始数据），而非Inertia.js的form实例。Inertia.js的useForm创建的form实例是专门负责收集、验证和提交表单数据的载体，直接修改外部的organisation对象不会同步到form实例中，导致提交时发送的还是form初始化时的原始数据。
• form实例未同步更新：虽然form初始化时用了organisation的初始值，但后续用户输入修改的是organisation对象的属性，form内部的数据完全没有更新，最终提交的自然是初始化时的原始值。

解决思路与修改方案 #

1. 修正前端表单数据绑定 #

将所有输入框的v-model从organisation.xxx改为form.xxx，确保用户输入的内容同步到Inertia的form实例中。修改后的前端代码如下：

<script setup>
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import { Head, Link, useForm, usePage } from '@inertiajs/vue3';

defineProps({
    organisation: {
        type: Object,
    },
});

const organisation = usePage().props.organisation;

const form = useForm({
    name: organisation.name,
    description: organisation.description,
    website: organisation.website,
    address: organisation.address,
    telephone: organisation.telephone,
    email: organisation.email,
});
</script>

<template>
    <form @submit.prevent="form.patch(route('organisation.update', organisation.id))" class="mt-6 space-y-6">
        <div>
            <InputLabel for="name" value="Name" />
            <TextInput
                id="name"
                type="text"
                class="mt-1 block w-full"
                v-model="form.name"
                required
                autofocus
                autocomplete="name" />
            <InputError class="mt-2" :message="form.errors.name" />
        </div>
        <!-- 其余输入框同理，将v-model替换为form.description、form.website等对应属性 -->
        <div class="flex items-center gap-4">
            <PrimaryButton :disabled="form.processing">Save</PrimaryButton>

            <Transition enter-from-class="opacity-0" leave-to-class="opacity-0" class="transition ease-in-out">
                <p v-if="form.recentlySuccessful" class="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
            </Transition>
        </div>
    </form>
</template>

2. 优化控制器代码（可选） #

利用Laravel模型的批量赋值功能简化代码，避免逐个属性赋值：

public function update(Request $request, $id) 
{
    $validated = $request->validate([
        'name' => 'required',
        'description' => 'required',
        'website' => 'required',
        'address' => 'required',
        'telephone' => 'required',
        'email' => 'required|email',
    ]);

    $organisation = Organisation::findOrFail($id);
    $organisation->update($validated);

    // 可选：返回成功响应
    return back()->with('success', 'Organisation updated successfully.');
}

3. 额外优化（可选） #

去掉重复的organisation变量定义，直接使用props传入的值初始化form：

<script setup>
// ... 导入组件和方法
const props = defineProps({
    organisation: {
        type: Object,
        required: true,
    },
});

const form = useForm({
    name: props.organisation.name,
    description: props.organisation.description,
    website: props.organisation.website,
    address: props.organisation.address,
    telephone: props.organisation.telephone,
    email: props.organisation.email,
});
</script>

内容的提问来源于stack exchange，提问作者Wayne Smallman