在Vue / Laravel中有分页问题

Question

尝试在Vue中对获取的数据进行分页。 但是有一个问题：

问题已更新

渲染错误：“ TypeError：this.estates.filter不是函数”

我会错过什么吗？

Pagination.vue

 Data(){ return { meta_data: { last_page: null, current_page: 1, prev_page_url: null } } }, mounted() { this.fetchEstates(); }, methods: { fetchEstates(page = 1) { axios.get('/ajax', { params: { page }}).then((response) => { this.estates = response.data; this.meta_data.last_page = response.data.last_page; this.meta_data.current_page = response.data.current_page; this.meta_data.prev_page_url = response.data.prev_page_url; }); } }, computed: { one: function () { let filteredStates = this.estates.filter((estate) => { return (this.keyword.length === 0 || estate.includes(this.keyword)) && (this.rooms.length === 0 || this.rooms.includes(estate.rooms)) && (this.regions.length === 0 || this.regions.includes(estate.region))}); /// rest of the code.... 

如果您需要更多信息，请告诉我。

Answer 1

$data = \DB::table('allestates')->paginate(5);
    $response = [
        'pagination' => [
            'total' => $data->total(),
            'per_page' => $data->perPage(),
            'current_page' => $data->currentPage(),
            'last_page' => $data->lastPage(),
            'from' => $data->firstItem(),
            'to' => $data->lastItem()
        ],
        'data' => $data
    ];
    return response()->json($response);

Answer 2

你应该换线

this.estates = response.data;

至

this.estates = response.data.data;