使用VueJS调用Laravel接口更新Todo记录不生效如何解决？

问题原因 #

你当前的核心问题是Laravel模型的批量赋值白名单配置错误，要更新的text字段没有加入允许批量赋值的列表中，Laravel会自动过滤不在白名单内的字段，所以接口执行成功但数据无变化。

解决方案 #

1. 修正模型$fillable配置

修改Todo模型的$fillable属性，加入你需要更新的text字段：

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Todo extends Model
{
    use HasFactory;
    protected $dates = [
        'created_at',
        'updated_at',
    ];

    // 加入需要批量赋值的字段
    protected $fillable = ['text'];
}

如果不需要严格限制批量赋值字段，也可以将$guarded设为空数组，放开所有字段的批量赋值限制：

protected $guarded = [];

2. 优化控制器逻辑（可选，推荐）

添加数据存在性校验，同时仅获取需要更新的字段，避免主键被意外修改，也不需要将id加入$fillable：

public function updateData(Request $request)
{
    // 找不到对应记录时直接返回404错误，避免后续调用报错
    $todo = Todo::findOrFail($request->id);
    // 仅提取需要更新的text字段，过滤多余请求参数
    $todo->update($request->only(['text']));

    return response()->json([
        'message' => 'updated'
    ]);
}

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