Vue -infinity-loading проблема с пакетом не может обновить данные во внешнем интерфейсе - PullRequest
0 голосов
/ 07 апреля 2020

Я создаю систему постов / комментариев / ответов, такую ​​как Facebook, и пытаюсь использовать vue -infinity-loading package, поэтому мне не нужно разбивать на страницы, используя числа, которые я хочу, чтобы пользователь прокручивал и загружал На странице, не нажимая никаких цифр, я успешно реализовал vue -infinity-loading, и она работала нормально, когда я прокручивал, отправлял запрос на сервер и загружал каждую страницу, но когда я пытался добавить комментарий или опубликовать его не работает, я не могу добавить или добавить комментарий без обновления страницы вручную, запрос успешно отправлен в бэкэнд, но ничего не изменилось. Мне нужно загрузить страницу вручную. this is working perfectly using pagination this is the same post using vue-infinity-loading и вот код vue компонента с использованием vue -infinity-loading package

 <div class="panel panel-white post panel-shadow" v-for="post in posts" >
   //content here
        </div>
        <infinite-loading @infinite="loadPosts"></infinite-loading>
<script>
export default {
    data(){
        return{
            posts:[],
            page:1,
        }
    },
    methods:{
        loadPosts($state){
            axios.get('api/post',{
                params:{
                    page:this.page,
                }
            }).then(({data})=>{

                if(data.data.length){
                    this.page += 1;
                    this.posts.push(...data.data);
                    $state.loaded();
                }
                else {
                    $state.complete();
                }
            });
            Fire.$on('loadPage',()=>{
                this.loadPosts($state); <-- I use this to send request to server to update data 
            });
        },
        addLike(post_id){
            Vue.axios.post('api/like',{
                post_id:post_id,
                user_id:this.post.user_id,
            }).then(()=>{
                Fire.$emit('loadPage'); <-- to apply the request
            })
        },

    },
    name: "Post",
}

...