Vue js Paginate Component doesn't trigger the Click-Handler Method

Question

I am developing a code for a Vue Component in which I have a list where I want it to be paginated. I have the pagination and the code is working fine until the point that I need to click to go to the next page, which is 2 in this case. I've placed a console log and it doesn't even it the method.

This is my code, can you guys see something wrong with it?

<ul class="movements-list framed half-bottom-space">
                <li class="list-head">
                    <p>Test</p>
                    <p>Test2</p>
                    <p>Test3<small>Test4</small></p>
                </li>
                <li v-for="item in getItems">
                    <p>{{item}}</p>
                    <p>{{item}}</p>
                    <p class="minus">{{item}} <small>{{item}}</small></p>
                </li>

            </ul>
            <paginate :page-count="getPageCount"
                      :page-range="3"
                      :margin-pages="2"
                      :click-handler="clickCallback"
                      :prev-text="'＜'"
                      :next-text="'＞'"
                      :container-class="'pagination'"
                      :page-class="'page-item'">
            </paginate>


<script>
    export default {
        name: "cenas-component",
        data: () => ({
            items: ["Saab", "Volvo", "BMW", "BMW", "BMW", "BMW", "BMW", "BMW", "BMW", "BMW", "BMW", "BMW"],
            parPage: 5,
            currentPage: 1
        }),
        methods: {
            clickCallback: function (pageNum) {
                console.log('im here in clickCallback')
                console.log(pageNum)
                this.currentPage = Number(pageNum);
            },

        },
        computed: {
            getItems: function () {
                let current = this.currentPage * this.parPage;
                let start = current - this.parPage;
                return this.items.slice(start, current);
            },
            getPageCount: function () {
                console.log('getPageCount')
                return Math.ceil(this.items.length / this.parPage);
            }
        }
    }

</script>

So basically when I try to click the next pagination number it doesn't paginate and it doesn't even change from 1 to 2. As you can see I've placed a Console.log in the clickCallback method and it doesn't hit the console.log

Do you guys see any problem with the code? Thanks guys!

Answer 1

This is a really bad take on my part.

So it was working fine but the problem was that I had scripts blowing up and then the other scripts that would load the component of my pagination wouldn't run because it is Javascript.

Mohammed actually tried out my code and it worked out and that made me question some console errors that in some pages are irelevant but in this case they were relevant.

Answer 2

/* text input for adding item to checklist */
Vue.component('paginate', VuejsPaginate)

Vue.component('test', {
  data: () => ({
            items: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
            parPage: 5,
            currentPage: 1
        }),
        methods: {
            clickCallback: function (pageNum) {
                this.currentPage = Number(pageNum);
            },

        },
        computed: {
            getItems: function () {
                let current = this.currentPage * this.parPage;
                let start = current - this.parPage;
                return this.items.slice(start, current);
            },
            getPageCount: function () {
                return Math.ceil(this.items.length / this.parPage);
            }
        }
  ,
  template: `
    <div>
    <ul>
                <li v-for="item in getItems">
                    <p class="minus">{{item}} <small>{{item}}</small></p>
                </li>

            </ul>
            <paginate :page-count="getPageCount"
                      :page-range="3"
                      :margin-pages="2"
                      :click-handler="clickCallback"
                      :prev-text="'＜'"
                      :next-text="'＞'"
                      :container-class="'pagination'"
                      :page-class="'page-item'">
            </paginate>
            
    </div>
  `,
  });
let vm = new Vue({
  el: '#app'
})

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Vue ToDo List</title>
    <link href="main-styles.css" rel="stylesheet" type="text/css" />
  <link href="svg-styles.css" rel="stylesheet" type="text/css" />
  <link href="component-styles.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans|Lato" rel="stylesheet">
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vuejs-paginate/2.1.0/index.js"></script>
  <div id="app">
    <test></test>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>

I already tried it, and it worked fine . but sorry for no styles at all. you can test the snippet your self

Answer 3

Could you please share the code for the paginate component? however I think the main reason is that during sending the clickCallback from the template there is nothin represent the pageNum that supposed to be passed as parameter.