When I'm using Laravel Vue Pagination I can only load first page of relationship table

I'm using gilbitron/laravel-vue-pagination and I can only fetch first page of relationship table as select or a list if that table is paginated, I can't fetch all data. In controller I return data like this:

public function index()
{
    return Settlement::with('town')->paginate(10);
}

and in Vue I fetch like this:

loadSettlements() {
  axios.get('api/settlement').then(response => { this.settlements = response.data.data; });
},

and I called this.loadSettlements();

I assumed that is another way to do in controller because I tried everything that I can find for fetching in Vue...

muzafferdede

6 years ago

Level 13

you should pass the page number

  axios.get('api/settlement?page=' + pageNo).then(response => { this.settlements = response.data.data; });

shone83

6 years ago

Level 1

Now I get settlements:Object (empty) and can't load table.

Before this was settlements:Array[10]

If I do this for example:

loadSettlements(page = 2) {
  axios.get('api/settlement?page=' + page).then(response => { this.settlements = response.data.data; });
},

I get page 2 just fine, but I don't need separate pages, I need all data from table.

shone83

6 years ago

Best Answer

Level 1

I figured it out. I made new method along side index() where I use pagination called all_data:

public function allData()
{
    return Settlement::all();
}

then make new route along settlements apiResources route:

Route::apiResources(['settlement' => 'API\SettlementsController']);
Route::get('all_settlements', 'API\SettlementsController@allData');

and only then when I call loadSettlements function like this:

loadSettlements() {
  axios.get('api/all_settlements').then(({ data }) => (this.all_settlements = data));
},

all settlements is fetched ;)

I was using wrong logic in the beginning.

Please or to participate in this conversation.