Laravel 11+Inertia+Vue同页编辑功能数据未更新求助

核心问题分析 #

你的编辑功能无报错但数据库未更新，主要存在两个关键问题：路由模型绑定不匹配、表单字段绑定错误，以下是具体修复步骤：

1. 修复路由模型绑定不匹配

Laravel资源路由的update方法会自动生成参数名{finance}（对应控制器名称FinancesController），但你控制器中使用的是Income $income，参数名不一致导致隐式模型绑定失败，无法正确加载要编辑的Income实例。

修复方法：
修改控制器update方法的参数名，与路由参数保持一致：

public function update(Request $request, Income $finance)
{
    $finance->update(
        $request->validate([
            'description' => 'required',
            'amount' => 'required',
            'day_deposited' => 'required',
        ])
    );
    return redirect()->route('finances.index');
}

2. 修正表单字段绑定错误

在Edit.vue中，description字段错误使用了v-model.number修饰符——该修饰符会把字符串转为数字，而description是文本类型，导致提交的数据变为NaN，后端验证通过但实际写入无效值。

修复方法：
去掉description字段的.number修饰符：

<template>
  <form @submit.prevent="update">
    <div>
        <input v-model="form.description" type="text" />
        <input v-model.number="form.amount" type="text" />
        <input v-model.number="form.day_deposited" type="text" />
    </div>
    <div>
        <button type="submit">Edit</button>
    </div>
  </form>
</template>

3. 可选：添加错误反馈与无刷新优化

为了方便排查后续问题，建议在Edit.vue中添加表单错误提示；如果要实现无刷新更新，可以优化控制器响应逻辑：

3.1 添加错误提示

<template>
  <form @submit.prevent="update">
    <div>
        <input v-model="form.description" type="text" />
        <div v-if="form.errors.description" class="text-red-500">{{ form.errors.description }}</div>
        
        <input v-model.number="form.amount" type="text" />
        <div v-if="form.errors.amount" class="text-red-500">{{ form.errors.amount }}</div>
        
        <input v-model.number="form.day_deposited" type="text" />
        <div v-if="form.errors.day_deposited" class="text-red-500">{{ form.errors.day_deposited }}</div>
    </div>
    <div>
        <button type="submit">Edit</button>
    </div>
  </form>
</template>

3.2 无刷新更新数据

修改控制器返回逻辑，直接返回更新后的列表数据，避免页面跳转：

public function update(Request $request, Income $finance)
{
    $finance->update(
        $request->validate([
            'description' => 'required',
            'amount' => 'required',
            'day_deposited' => 'required',
        ])
    );
    
    return Inertia::render('Finances/FinancesMain', [
        'incomes' => Income::all(),
    ]);
}

同时在Edit.vue的提交方法中添加成功回调：

const update = () => {
    form.put(`/finances/${props.income.id}`, {
        onSuccess: () => {
            form.reset();
        }
    })
}

内容的提问来源于stack exchange，提问作者Marianne Hartigan