Laravel и vue бесконечная проблема с загрузчиком и нумерацией страниц - PullRequest
Новая
       50

Laravel и vue бесконечная проблема с загрузчиком и нумерацией страниц

0 голосов
/ 28 февраля 2020

Мой проект:
У меня много постов, метод index возвращает постраничные посты, по 3 на страницу.
Однако в моем Vuejs я не хочу показывать страницы, и я использую бесконечную прокрутку, чтобы показать следующие 3 сообщения каждый раз, когда пользователь прокручивает страницу вниз.
Каждый раз, когда я удаляю сообщение, мне удается удалить его в режиме реального времени с помощью vue. Страница не обновляется, а запись удаляется в реальном времени.

Проблема:
Когда я загружаю посты в веб-интерфейсе, у меня загружено 3 поста, затем я удаляю пост, например пост №1.

Как мы знаем, вторая страница в laravel означает экранирование первых 3 постов и получение второго набора из 3 постов.

Теперь с удалением первого поста из базы данных, когда я go в нижней части страницы, я ожидаю получить сообщения # 4 # 5 # 6, но я получу # 5 # 6 # 7.

причина:
потому что одна запись пропала в базе данных, а следующий набор из 3 постов теперь другой.

Но как решить эту проблему? Есть ли решение этой проблемы

1 Ответ

0 голосов
/ 28 февраля 2020

Ну, я думаю, что лучшее решение - обновлять массив сообщений после каждого запроса на удаление. Просто сделайте запрос GET с текущей страницей сразу после операции удаления, обновите массив и добавьте новое значение в существующий массив, если он есть. Теперь я написал пример кода для этого, я надеюсь, что это поможет. Поскольку вы не предоставили общий доступ к коду, возможно, код для вашего компонента 

<template>
   <div>
      <div v-for="post in posts" :key="post._id">
          <div>{{post.name}}</div>
          <div>
             <button @click="deletePost(post)">Delete</button>
          </div>
      </div>
   </div>
</template>

<script>

import axios from "axios";

export default() {
   data() {
       current_page: 1,
       posts: []
   },

   created() {
        this.updatePosts();
   },

   methods: {
        updatePosts() {
            axios.get("http://www.example.com/posts"{
                params: {page: this.current_page}
            }).then(res => {
                if(res.status == '200') {
                    res.data.posts.forEach(post => {
                        if(!this.posts.includes(post)) this.posts.push(post);
                    });
                }
            }).catch(err => console.log(err));
        },

        deletePost(post) {
            axios.delete("http://www.example.com/posts",{
                params: {id: post.id}
            }).then(res => {
                if(res.status == '200') {
                    this.updatePosts(); // this will update array
                }
            }).catch(err => console.log(err));
        }
   }
}

</script>

Не забудьте увеличить значение current_page на 1 при достижении нижней части страницы.

...