Infinite Scroll 구현 (더보기)

# What?

일반적인 페이징 방식이 아닌, 더보기를 누르는 방식

 

# How?

- 핵심은 replaceState로 url 파라미터를 초기화하는것.

-> 이렇게 안하면 page 파라미터가 url에 남아있어서 새로고침 시 3페이지부터 보이고 이럼

 

@ Test.vue

 <template>
 <div class="btn-wrap" style="margin-top:40px;">
   <a href="" class="blue-btn" @click.prevent="() => filter(true)">더보기</a>
 </div>
 </template>
 <script>
 	 components: {Link, Pagination},
    data(){
        return {
            initialUrl: this.$page.url,
            bids: this.$page.props.bids,
            form: this.$inertia.form({
                page: 1,
            }),
        }
    },
    methods:{


        filter(loadMore = false){
            if(loadMore){
                if(this.form.page >= this.bids.meta.last_page)
                    return false;

                this.form.page += 1;
            }

            this.form.get("/bids", {
                preserveScroll: true,
                preserveState: true,
                onSuccess: (page) => {
                    if(loadMore){
                        window.history.replaceState({}, this.$page.title, this.initialUrl)

                        return this.bids = {
                            ...this.bids,
                            data: [...this.bids.data, ...page.props.bids.data]
                        };
                    }

                    return this.bids = page.props.bids;
                }
            });
        },


    },
    mounted() {

    }
 </script>