Компонент Vue js Paginate не запускает метод Click-Handler

ProgramBox

Компонент Vue js Paginate не запускает метод Click-Handler

Post author:admin
Запись опубликована:11 декабря, 2022
Post category:Вопросы по программированию

#javascript #vue.js #vuejs2 #vue-component

Вопрос:

Я разрабатываю код для компонента 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

Ребята, вы видите какие-либо проблемы с кодом? Спасибо, ребята!

Ответ №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>

Развернуть фрагмент кода

Я уже пробовал это, и это сработало нормально. но извините за отсутствие стилей вообще. вы можете протестировать фрагмент самостоятельно

1. На самом деле были сценарии, которые выдавали ошибку и не позволяли скрипту разбиения на страницы работать, потому что он не загружался… В любом случае, большое тебе спасибо, мой чувак, я поддержал твой ответ, потому что это заставило меня еще больше задуматься: «Если это работает для него, почему это не работает для меня?»

Ответ №2:

Не могли бы вы поделиться кодом для компонента разбиения на страницы? однако я думаю, что основная причина заключается в том, что во время отправки clickCallback из шаблона ничто не представляет номер страницы, который должен быть передан в качестве параметра.

Ответ №3:

Это действительно плохой подход с моей стороны.

Так что все работало нормально, но проблема заключалась в том, что у меня вылетали скрипты, а затем другие скрипты, которые загружали компонент моей разбивки на страницы, не запускались, потому что это Javascript.

Мохаммед действительно опробовал мой код, и он сработал, и это заставило меня усомниться в некоторых ошибках консоли, которые на некоторых страницах неуместны, но в данном случае они были уместны.