Vue js Paginate 组件不会触发 Click-Handler 方法答案

【问题标题】：Vue js Paginate Component doesn't trigger the Click-Handler MethodVue js Paginate 组件不会触发 Click-Handler 方法
【发布时间】：2021-05-16 08:04:57
【问题描述】：

我正在为 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>

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

你们发现代码有什么问题吗？谢谢大家！

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

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

我已经试过了，效果很好。但很抱歉根本没有样式。你可以自己测试sn-p

【讨论】：

实际上是脚本给出了错误并且没有让分页脚本工作，因为它不会加载...... FACE MEGA PALM 无论如何，非常感谢我的伙计，我赞成你的回答，因为这让我更加怀疑“如果它对他有用，为什么它对我不起作用？”

【解决方案2】：

能否分享一下分页组件的代码？但是我认为主要原因是在从模板发送 clickCallback 期间没有什么代表应该作为参数传递的 pageNum。

【讨论】：

这就是对问题有用的所有代码。剩下的只是一个非常基础的 Index.js，没有什么可增加的价值

【解决方案3】：

这对我来说真的很糟糕。

所以它工作正常，但问题是我的脚本爆炸了，然后加载我的分页组件的其他脚本无法运行，因为它是 Javascript。

Mohammed 实际上尝试了我的代码，它成功了，这让我质疑一些控制台错误，这些错误在某些页面中是不相关的，但在这种情况下它们是相关的。

【讨论】：