Vue-Laravel CRUD删除功能失效：调用delete()触发空对象错误

这个错误的核心原因很明确：你的后端代码尝试对一个null值调用delete()方法，出现这个情况主要有两个问题——前端请求的URL没有传递正确的ID，以及后端没有处理记录不存在的情况。下面一步步帮你修复：

1. 修复前端请求的URL问题 #

你当前的前端代码里，axios.delete("api/despesas/{despesa}")使用了静态字符串占位符，并没有将实际的id替换进去。这会导致后端收到的请求URL是api/despesas/{despesa}，而不是带真实ID的地址，自然找不到对应的记录。

修改后的前端代码：

async deleteDespesa(id) { 
    try {
        // 使用模板字符串将id插入到URL中
        await axios.delete(`api/despesas/${id}`);
        // 用filter更可靠地删除列表项（避免indexOf对对象判断失效的问题）
        this.despesas = this.despesas.filter(despesa => despesa.id !== id);
        this.getDespesa();
    } catch (error) {
        console.error('删除失败:', error.response?.data?.message || '未知错误');
        // 这里可以添加用户提示，比如alert或者全局通知
    }
}

2. 修复后端的空值判断问题 #

即使前端传对了ID，也可能存在记录已经被删除或者不存在的情况，直接调用delete()会触发错误。我们可以用两种方式处理：

方式一：使用findOrFail（推荐） #

findOrFail会在找不到记录时自动抛出404异常，Laravel会自动处理这个异常并返回合适的错误响应：

public function destroy($id) { 
    $despesa = Despesa::findOrFail($id); 
    $despesa->delete(); 
    return response()->json(['message' => '删除成功']); 
}

方式二：手动判断记录是否存在 #

如果你需要自定义错误信息，可以手动检查：

public function destroy($id) { 
    $despesa = Despesa::find($id); 
    if (!$despesa) {
        return response()->json(['message' => '未找到该支出记录'], 404);
    }
    $despesa->delete(); 
    return response()->json(['message' => '删除成功']); 
}

额外提示 #

• 确保你的Laravel路由配置正确，destroy方法对应的路由应该是Route::delete('api/despesas/{despesa}', [DespesaController::class, 'destroy']);（Laravel 8+写法）
• 前端删除列表项时，filter比splice更可靠，因为如果你的despesas数组里是对象，indexOf(id)可能找不到正确的索引位置

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