To achieve the pagination of campaigns within each client, you can use Laravel's paginate method on the hasMany relationship. However, you need to handle this on a per-client basis. Here's how you can do it:
First, you'll need to get the clients and then paginate the campaigns for each client separately. You can't directly paginate across different clients' campaigns in a single query because pagination is designed to work on a single query result set.
Here's an example of how you can achieve this in your controller:
// Get the clients
$clients = Client::all();
// Iterate over each client and paginate their campaigns
foreach ($clients as $client) {
$client->campaigns = $client->campaigns()->paginate(5);
}
// Pass the clients with their paginated campaigns to the view
return view('your_view', compact('clients'));
In your Vue component, you will need to handle the pagination for each client's campaigns. You can do this by creating a pagination component in Vue that takes the paginated campaigns for each client and allows you to navigate through the pages.
Here's a simplified example of what your Vue component might look like:
<template>
<div>
<div v-for="client in clients" :key="client.id">
<h2>Client {{ client.id }}:</h2>
<ul>
<li v-for="campaign in client.campaigns.data" :key="campaign.id">
{{ campaign.name }}
</li>
</ul>
<pagination :data="client.campaigns" @page-changed="fetchCampaigns(client, $event)"></pagination>
</div>
</div>
</template>
<script>
export default {
props: ['clients'],
methods: {
fetchCampaigns(client, page) {
// Make an API call to fetch the campaigns for the client on the specified page
// Update the client's campaigns with the new paginated data
}
}
}
</script>
In the fetchCampaigns method, you would make an API call to a route that returns the paginated campaigns for a specific client and page number. The server-side route would look something like this:
Route::get('/clients/{client}/campaigns', function (Client $client) {
return $client->campaigns()->paginate(5);
});
Remember to handle the pagination links in your Vue component, as you'll need to provide a way for the user to navigate through the pages of campaigns for each client.
This approach allows you to paginate each client's campaigns independently, which seems to be what you're looking for based on your question.
