Vue.js 3使用Laravel分页时出现map() is not a function错误

问题场景 #

在Vue.js中通过map()函数处理数据数组动态渲染表格，当Laravel后端使用paginate(10)方法返回数据时，前端出现「TypeError: this.leads.map is not a function」错误；改用Lead::get()方法获取数据则能正常运行。

原因分析 #

Laravel的paginate()方法返回的不是纯数据数组，而是包含分页元数据（总条数、当前页、每页条数等）的分页对象；而get()方法返回的是Eloquent集合，可直接当作数组使用。当把后端返回的response.data.leads赋值给Vue的this.leads时，这个值是带结构的对象而非数组，因此无法调用数组的map()方法。

解决方法 #

方法一：后端返回当前页的纯数据数组 #

如果不需要分页元数据（比如无需做分页导航），可在Laravel控制器中直接返回分页对象的items()结果，得到当前页的纯数据数组：

修改Laravel控制器代码：

public function getleads(Request $request)
{
    $table_name = 'leads';
    $query = "SHOW COLUMNS FROM $table_name";
    $data = DB::select($query);

    if ($request->ajax()) {
        return response()->json([
            // 使用items()获取当前页的纯数据数组
            'leads' => Lead::paginate(10)->items(),
            'headers' => $data
        ], Response::HTTP_OK);
    }
}

方法二：前端提取分页对象中的数据数组 #

如果需要保留分页元数据（用于实现分页导航），可在Vue中提取分页对象里的data字段，这部分是当前页的数组数据：

修改Vue脚本代码：

data() {
    return {
        headers: [],
        leads: [],
        pagination: {}, // 存储分页元数据（按需使用）
        field: '',
    }
},

computed: {
    visibleHeaders() {
        return this.headers.map(h => {
            return h.Field.replace("_", " ").toUpperCase()
        });
    },
    visibileColumn() {
        return this.leads.map(c => c); // 此时leads为数组，可正常调用map
    },
},

methods: {
   getData() {
        axios.get('/leads/getleads')
        .then(response => {
            // 提取分页对象中的data数组
            this.leads = response.data.leads.data;
            // 保存分页元数据（按需使用）
            this.pagination = {
                total: response.data.leads.total,
                currentPage: response.data.leads.current_page,
                perPage: response.data.leads.per_page
            };
            this.headers = response.data.headers;
        })
    },
}

额外说明 #

如果visibileColumn计算属性只是单纯返回leads的映射（无额外处理逻辑），可直接在模板中使用leads代替visibileColumn，减少不必要的计算。

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