在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

您应该更改行

this.estates = response.data;

到

this.estates = response.data.data;

Answer 2

$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);