Javascript Vue js分页组件不'；t触发Click处理程序方法

我正在为一个Vue组件开发一个代码，其中有一个列表，我希望在其中对其进行分页。 我有分页，代码工作正常，直到我需要点击进入下一页，在本例中是2。 我已经放置了一个控制台日志，但它甚至不支持该方法

这是我的密码，你们能看到有什么问题吗

<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>

试验

测试2

测试3测试4



{{item}}

{{item}}

{{item}}{{item}


导出默认值{
名称：“cenas组件”，
数据：（）=>({
商品：[“萨博”、“沃尔沃”、“宝马”、“宝马”、“宝马”、“宝马”、“宝马”、“宝马”、“宝马”、“宝马”、“宝马”、“宝马”、“宝马”、“宝马”、“宝马”]，
第5页，
当前页：1
}),
方法：{
单击回调：函数（pageNum）{
console.log（'我在clickCallback'中）
console.log（pageNum）
this.currentPage=编号（pageNum）；
},
},
计算：{
getItems:函数（）{
让current=this.currentPage*this.parPage；
让start=current-this.parPage；
返回此.items.slice（开始，当前）；
},
getPageCount:函数（）{
console.log（'getPageCount'）
返回Math.ceil（this.items.length/this.parPage）；
}
}
}

因此，基本上，当我尝试单击下一个页码时，它不会分页，甚至不会从1变为2。 如您所见，我在clickCallback方法中放置了一个Console.log，但它没有命中Console.log

你们觉得代码有问题吗？

---

谢谢大家

您能分享分页组件的代码吗？ 但是我认为主要原因是在从模板发送clickCallback的过程中 没有任何内容表示应作为参数传递的pageNum。

/*用于将项目添加到检查表的文本输入*/
Vue.component（'paginate'，VuejsPaginate）
Vue.组件（“测试”{
数据：（）=>({
项目：[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“10”、“11”、“12”]，
第5页，
当前页：1
}),
方法：{
单击回调：函数（pageNum）{
this.currentPage=编号（pageNum）；
},
},
计算：{
getItems:函数（）{
让current=this.currentPage*this.parPage；
让start=current-this.parPage；
返回此.items.slice（开始，当前）；
},
getPageCount:函数（）{
返回Math.ceil（this.items.length/this.parPage）；
}
}
,
模板：`


{{item}}{{item}


`,
});
让vm=新Vue({
el:“#应用程序”
})

Vue待办事项列表

这对我来说是一个非常糟糕的想法

所以它工作得很好，但问题是我的脚本被破坏了，然后其他加载分页组件的脚本不会运行，因为它是Javascript

---

Mohammed实际试用了我的代码，它成功了，这让我对一些控制台错误产生了疑问，这些错误在某些页面中是相关的，但在本例中它们是相关的。

这就是所有对问题有用的代码。其余的只是一个Index.js，它非常基本，没有任何可添加的值。实际上，它是一些脚本，它们给出了一个错误，不允许分页脚本工作，因为它不会加载。。。不管怎么说，非常感谢你，伙计，我对你的答案投了更高的票，因为这让我的问题更像是“如果对他有效，为什么对我无效？”