Для реализации бесконечной загрузки постов на Laravel + Vue.js, необходимо использовать пагинацию на стороне сервера (Laravel) и подгружать данные частями на стороне клиента (Vue.js).
Вот как это можно сделать шаг за шагом:
1. **На стороне сервера (Laravel)**:
- В вашем контроллере, где вы получаете посты, укажите количество постов на одной странице, которые будут отправляться клиенту.
- Верните данные с пагинацией, используя встроенный метод Laravel paginate().
public function getPosts()
{
$posts = Post::paginate(10); // Получаем посты с пагинацией: 10 постов на страницу
return response()->json($posts);
}
2. **На стороне клиента (Vue.js)**:
- Создайте компонент Vue.js, который будет отображать посты и обрабатывать бесконечную загрузку.
- Используйте библиотеку Axios для выполнения HTTP-запросов к вашему серверу Laravel.
export default {
data() {
return {
posts: [],
nextPageUrl: '/api/posts', // URL, по которому будем загружать следующие страницы постов
};
},
methods: {
async loadMorePosts() {
const response = await axios.get(this.nextPageUrl);
this.posts = this.posts.concat(response.data.data); // Добавляем полученные посты к уже загруженным
this.nextPageUrl = response.data.next_page_url; // Обновляем URL для следующего запроса
},
},
mounted() {
this.loadMorePosts(); // Загружаем первую страницу постов при инициализации компонента
},
};
3. **Добавление бесконечной загрузки**:
- Для реализации бесконечной загрузки постов при скроллинге страницы, вы можете использовать директиву v-infinite-scroll.
- Установите эту директиву на элемент, где будут отображаться посты, и вызовите метод loadMorePosts при достижении конца списка.
<template>
<div v-infinite-scroll="loadMorePosts">
<div v-for="post in posts" :key="post.id">
<!-- Вывод информации о посте -->
</div>
</div>
</template>
Теперь у вас должна быть реализована бесконечная загрузка постов на Laravel + Vue.js. Пользователи будут видеть новые посты, по мере прокрутки страницы, без необходимости перезагрузки всей страницы.