CookieMonster's avatar

pagination not disabled in last page

I want to make a pagination page on my page and I use pagination for laravel and pass the data to my vue template. It has a previous and next page to toggle it. In the first page, the previous button is disabled and when it reaches the last page, the next page is disabled.

While my previous page works fine but when it reaches the last page, clicking next will bring me to page 1 again.

Articles.vue:

<template>
    <div>
        <h2>Article</h2>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li v-bind:class="[{disabled : !pagination.prev_page_url}]" v-on:click="fetchArticles(pagination.prev_page_url)" class="page-item"><a class="page-link" href="#">Previous</a></li>
                <li v-bind:class="[{disabled : !pagination.next_page_url}]" v-on:click="fetchArticles(pagination.next_page_url)" class="page-item"><a class="page-link" href="#">Next</a></li>
            </ul>
        </nav>
        <div class="card card-body mb-2" v-for="article in articles" :key="article.id">
            <h3>{{article.title}}</h3>
            <p>{{article.body}}</p>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            articles:[],
            article:{
                id:'',
                title:'',
                body:''
            },
            article_id:'',
            pagination:{},
            edit:false
        }
    },
    created(){
        this.fetchArticles();
    },
    methods:{
        fetchArticles(page_url){
            let vm = this;
            page_url = page_url || '/api/articles'
            fetch(page_url).
             then(res => res.json()).
             then(res => {
                 this.articles = res.data;
                 vm.makePagination(res.meta,res.links);
                //console.log(this.articles);
             }).
             catch(err => console.log(err));
        },
        makePagination(meta,links){
            let pagination = {
                current_page : meta.current_page,
                last_page : meta.last_page,
                next_page_url : links.next,
                prev_page_url : links.prev
            }
            this.pagination = pagination;
            console.log(this.pagination);

        }
    }
}
</script>

The disabled (grey highlight) does show but I can still click next and proceed with it. Any idea what did I miss?

0 likes
8 replies
CookieMonster's avatar

Hmm,but it knows I am on the first page which disabled the previous button and also knows i am on the last page and disabled it, just that I can still click it.

jlrdw's avatar

Then in the css it should be disabled from clicking anymore. Study how the laravel paginator works, look at the templates.

Edit

        /////     top not shown   
         {{-- Next Page Link --}}
            @if ($paginator->hasMorePages())
                <li class="page-item">
                    <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a>
                </li>
            @else
                <li class="page-item disabled" aria-disabled="true">
                    <span class="page-link">@lang('pagination.next')</span>
                </li>
            @endif
        </ul>
    </nav>
@endif

@nickywan123 were you able to resolve this.

jlrdw's avatar

I don't know why his is working I just know that it needs to be disabled in css.

Unless you missed one little detail in the video.

CookieMonster's avatar

Do you see something wrong with my code?

because it managed to disabled the "prev" but not the "next". Pls help.

CookieMonster's avatar

Yea it's in the github uploaded by the creator. I reviewed them though but still the same issue. It's just strange to me that it works but the button is not disabled.

Please or to participate in this conversation.